这次给大家带来vue上传图片到数据库在前端页面展示，vue上传图片到数据库在前端页面展示的注意事项有哪些，下面就是实战案例，一起来看一下。
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
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("文件格式不支持上传"); }}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
js解析数据技巧总结
JS字符串的操作详解
以上就是vue上传图片到数据库在前端页面展示的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2762875.html
