微客导航 » 文章资讯 » vue 使用原生组件上传图片的实例

vue 使用原生组件上传图片的实例

2023-07-17 00:38:04 304

需求描述：需要将后台返回的图片路径赋值到img的src

1一个页面上传一张图片

当一个页面只有一个位置需要上传图片，很简单，直接绑定上传按钮

html页面

js代码：封装上传图片的方法

uploadPic(e){
var_self=this;
varinputFile=e.target;
if(!inputFile.files||inputFile.files.length<=0){
return;
}
varfile=inputFile.files[0];
varformData=newFormData();
formData.append('file',file);
formData.append('SaveDir','Map/MapItem');
formData.append("FileName",$.whiskey.tools.dateFormat(newDate(),"HHmmssffff"));
$.ajax({
url:"/Upload/UploadPic",//后台上传图片的方法
type:'POST',
dateType:'json',
cache:false,
data:formData,
processData:false,
contentType:false,
success:function(res){
if(res.ResultType==3){
varfilePath=res.Data.file;//后台返回的图片路径
_self.http://dh.wk163.comhttp://dh.wk163.commapItem.MapIcon=filePath;//将路径赋值到声明的变量中
}
}
});
},

2一个页面上传多张图片

当一个页面有多个位置需要上传图片，如果按照上面方法，得需要绑定多个上传函数，所以我把重复的部分封装出来,用到了promise函数

html页面

js代码：封装上传图片的方法

uploadPic(e){
var_self=this;
varinputfile=e.target;
_self.uploadImg(inputfile).then(data=>{
_self.http://dh.wk163.comhttp://dh.wk163.commapItem.MapIcon=data;//data为取到的图片路径
})
},
//封装函数
uploadImg(inputFile){
var_self=this;
if(!inputFile.files||inputFile.files.length<=0){
return;
}
returnnewPromise((suc,err)=>{
varfile=inputFile.files[0];
varfilepath="";
varformData=newFormData();
formData.append('file',file);
formData.append('SaveDir','Map/MapSite');
formData.append("FileName",$.whiskey.tools.dateFormat(newDate(),"HHmmssffff"));
$.ajax({
url:"/Upload/UploadPic",
type:'POST',
dateType:'json',
cache:false,
data:formData,
processData:false,
async:false,
contentType:false,
success:function(res){
if(res.ResultType==3){
filepath=res.Data.file;
suc(filepath);
}
}
});
})
},
},

补充知识：vue利用原生input上传图片并预览并删除

看代码~

js部分

以上这篇vue使用原生组件上传图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 使用原生组件上传图片的实例

热门推荐

随机推荐