vue 使用原生组件上传图片的实例
需求描述:需要将后台返回的图片路径赋值到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上传图片并预览并删除
看代码~