微客导航 » 文章资讯 » vue实现的上传图片到数据库并显示到页面功能示例

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

2023-09-15 07:32:05 351

本文实例讲述了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程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐