vue实现的上传图片到数据库并显示到页面功能示例


Posted in Javascript onMarch 17, 2018

本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考,具体如下:

1、点击上传图片,弹出选择图片选项框。

页面代码:

<div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div>
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload">
<img :src="'http://localhost:8888'+item.photos_url" alt=""/>

由于我们要设置上传图片的样式,所以把input隐藏,并要做如下操作把input的点击事件给div框:

mounted: function () {
 var upload = document.getElementById("btnUpload");
 var avatar = document.getElementById("avatar");
 upload.onclick =function(){
  avatar.click(); //注意IE的兼容性
 };
}

2、在api接口的controller层加入两个文件,命名自己定,如:

upFile.js

let multer=require('multer');
let storage = multer.diskStorage({
  //设置上传后文件路径,uploads文件夹会自动创建。
  destination: function (req, file, cb) {
    cb(null, './public/uploads')
  },
  //给上传文件重命名,获取添加后缀名
  filename: function (req, file, cb) {
    let fileFormat = (file.originalname).split(".");
    cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
//添加配置文件到multer对象。
let upload = multer({
  storage: storage
});
module.exports = upload;

upFileController.js

var muilter = require('./upFile.js');
//multer有single()中的名称必须是表单上传字段的name名称。
var upload=muilter.single('file');
function dataInput(req, res) {
  upload(req, res, function (err) {
    //添加错误处理
    if (err) {
      return console.log(err);
    }
    //文件信息在req.file或者req.files中显示。
    let photoPath = req.file.path;
    photoPath = photoPath.replace(/public/,"");//将文件路径中的public\去掉,否则会和静态资源配置冲突
    //将photoPath存入数据库即可
    console.log(photoPath);
    res.send(photoPath);
  });
}
module.exports = {
  dataInput
};

3、在页面中将图片的地址存到数据库

upload: function (e) {
    var that = this;
    let formData = new window.FormData();
    let file = e.target.files[0];
    formData.append('file',file);//通过append向form对象添加数据
    //利用split切割,拿到上传文件的格式
    var src = file.name,
     formart = src.split(".")[1];
    //使用if判断上传文件格式是否符合
    if (formart == "jpg" || formart == "png" ||
     formart == "docx" || formart == "txt" ||
     formart == "ppt" || formart == "xlsx" ||
     formart == "zip" || formart == "rar" ||
     formart == "doc") {
     //只有满足以上格式时,才会触发ajax请求
     this.$axios.post(this.$api.personalCenter.upFile,formData).then(function (res) {
      that.upFileData = res.data;
     }).then(function (res) {
      var params = {
       photos_url: that.upFileData,
       photo_des: ''
      };
//      console.log(params.photos_url,'photos_url')
      that.$axios.post(that.$api.personalCenter.wallAdd,qs.stringify(params)).then(function (res) {
       console.log(res.data);
       that.$options.methods.imgList.bind(that)();
      }).catch(function (err) {
       console.log(err);
       console.log("请求出错");
      })
     })
    } else {
     alert("文件格式不支持上传");
    }
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
AngularJS指令用法详解
Nov 02 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
详解如何探测小程序返回到webview页面
May 14 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 #Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
You might like
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
vue中appear的用法
2017/08/17 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python 实现selenium断言和验证的方法
2019/02/13 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
犯错检讨书
2014/02/21 职场文书
2014年安全员工作总结
2014/11/13 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers