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

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

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

页面代码：

上传图片

由于我们要设置上传图片的样式，所以把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程序设计有所帮助。

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

本文地址: http://www.cppcns.com/wangluo/javascript/222927.html