本文主要和大家介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。
1、点击上传图片，弹出选择图片选项框。
页面代码：
上传图片
由于我们要设置上传图片的样式，所以把input隐藏，并要做如下操作把input的点击事件给p框：
mounted: function () {
var upload = document.getElementById("btnUpload");
var avatar = document.getElementById("avatar");
upload.onclick =function(){
avatar.click(); //注意IE的兼容性
};
}2、在api接口的controller层加入两个文件，命名自己定，如：
立即学习“前端免费学习笔记（深入）”；
upFile.js
I-Shop购物系统
下载
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
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("文件格式不支持上传");
}
}
相关推荐：
