vue上传图片到数据库在前端页面展示

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

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

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;

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
};

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