vue实现的上传图片到数据库并显示到页面功能示例
本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考,具体如下:
1、点击上传图片,弹出选择图片选项框。
页面代码:
上传图片
由于我们要设置上传图片的样式,所以把input隐藏,并要做如下操作把input的点击事件给div框:
mounted:function(){ varupload=document.getElementById("btnUpload"); varavatar=document.getElementById("avatar"); upload.onclick=function(){ avatar.click();//注意IE的兼容性 }; }
2、在api接口的controller层加入两个文件,命名自己定,如:
upFile.js
letmulter=require('multer'); letstorage=multer.diskStorage({ //设置上传后文件路径,uploads文件夹会自动创建。 destination:function(req,file,cb){ cb(null,'./public/uploads') }, //给上传文件重命名,获取添加后缀名 filename:function(req,file,cb){ letfileFormat=(file.originalname).split("."); cb(null,file.fieldname+'-'+Date.now()+"."+fileFormat[fileFormat.length-1]); } }); //添加配置文件到multer对象。 letupload=multer({ storage:storage }); module.exports=upload;
upFileController.js
varmuilter=require('./upFile.js'); //multer有single()中的名称必须是表单上传字段的name名称。 varupload=muilter.single('file'); functiondataInput(req,res){ upload(req,res,function(err){ //添加错误处理 if(err){ returnconsole.log(err); } //文件信息在req.file或者req.files中显示。 letphotoPath=req.file.path; photoPath=photoPath.replace(/public/,"");//将文件路径中的public\去掉,否则会和静态资源配置冲突 //将photoPath存入数据库即可 console.log(photoPath); res.send(photoPath); }); } module.exports={ dataInput };
3、在页面中将图片的地址存到数据库
upload:function(e){ varthat=this; letformData=newwindow.FormData(); letfile=e.target.files[0]; formData.append('file',file);//通过append向form对象添加数据 //利用split切割,拿到上传文件的格式 varsrc=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){ varparams={ 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程序设计有所帮助。