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("文件格式不支持上传");        }      }