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

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

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

页面代码

rush:xhtml;">

由于我们要设置上传图片的样式,所以把input隐藏,并要做如下操作把input的点击事件给div框:

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

2、在api接口的controller层加入两个文件,命名自己定,如:

upFile.js

rush:js;"> let multer=require('multer'); let storage = multer.diskStorage({ //设置上传文件路径,uploads文件夹会自动创建。 destination: function (req,file,cb) { cb(null,'./public/uploads') },//给上传文件重命名获取添加后缀名 filename: function (req,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

rush: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、在页面中将图片的地址存到数据库

rush:js;"> 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程序设计有所帮助。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...