创建一个通用图片上传处理函数JS文件，如下图importaxiosfrom'axios'import{Toast}from'vant';functionupLoaderImg(uploadUrl,file){letchooseImg=[]//选择的图片数组letparams=newFormData()if(Array.isArray(file)){//因为该组件单选是对象obj，多选是数组array，所以处理的时候要注意特殊性chooseImg=file}else{chooseImg.push(file)}chooseImg.map((item)=>{params.append('file',item.file)})params.append('action','upload')letconfig={headers:{//添加请求头'Content-Type':'multipart/form-data'}}returnnewPromise((resolve,reject)=>{axios.post(uploadUrl,params,config).then(res=>{if(res&&res.data.status==0){Toast.loading({message:'图片上传中...',forbidClick:true,loadingType:'spinner',onClose:resolve(res.data)});}else{Toast.fail({message:'图片上传异常',forbidClick:true,onClose:reject(res.data)});}}).catch(err=>{Toast.fail({message:'服务器异常',forbidClick:true,onClose:reject(err)});});})}export{upLoaderImg}导入到需要图片上传的vue文件内import*asupImgFunfrom'@/libs/util.upLoaderImg.js'van-uploader单图片上传和van-uploader多图片批量上传这里的方式尽可能的采用了vant官方的event和prop，以及样式<van-uploaderv-model="chooseImgCover":after-read="afterRead":max-count="1"upload-text="上传图片"@delete="coverDelete"/><van-uploaderv-model="chooseImgInfo":after-read="afterRead"@delete="infoDelete":max-count="5"upload-text="上传图片"multiple/>//单图片上传asyncafterReadImg(file){letupUrl=this.webapi("upAppImgs@actionImgData")letresImgData=awaitupImgFun.upLoaderImg(upUrl,file)if(status==0){this.chooseImgCover=[]letthat=thissetTimeout(function(){that.$q.notify({message:'图片上传成功',position:'top',color:'positive',timeout:1000,})},1500)}this.chooseImgCover.push(this.imgFormatJson(resImgData.actionData))this.goodsDataForm.goo_picture=resImgData.actionData.attachment},//多图片上传asyncafterReadImgs(file){letupUrl=this.webapi("upAppImgs@actionImgData")letthat=this//注意这里这个数据通过异步返回的数据区域无法使用this这个关键词，需要转换一下if(file.length>1){file.forEach(asyncfunction(item){letresImgsData=awaitupImgFun.upLoaderImg(upUrl,item)that.delImgFormat(that.chooseImgInfo)//console.log(resImgsData)that.chooseImgInfo.push(that.imgFormatJson(resImgsData.actionData))that.goodsDataForm.goo_pic.push(resImgsData.actionData.attachment)})}else{letresImgData=awaitupImgFun.upLoaderImg(upUrl,file)that.delImgFormat(that.chooseImgInfo)that.chooseImgInfo.push(that.imgFormatJson(resImgData.actionData))that.goodsDataForm.goo_pic.push(resImgData.actionData.attachment)}if(status==0){setTimeout(function(){that.$q.notify({message:'图片上传成功',position:'top',color:'positive',timeout:1000,})},1500)}console.log(that.chooseImgInfo)},//删除单图片coverDelete(file){this.goodsDataForm.goo_picture=[]},//删除多图片infoDelete(file){for(letkeyinthis.goodsDataForm.goo_pic){if(this.goodsDataForm.goo_pic.includes(file.attachment)){this.goodsDataForm.goo_pic.splice(this.goodsDataForm.goo_pic.indexOf(file.attachment),1);}}},//图片上传后显示格式转换imgFormatJson(imgData){letimgFormat={attachment:imgData.attachment,ext:imgData.ext,filename:imgData.filename,filesize:imgData.filesize,group_id:imgData.group_id,height:imgData.height,name:imgData.name,width:imgData.width,url:imgData.url,isImage:true}returnimgFormat},//后端返回来图片显示格式转换imgFormatData(backimgData,attachUrl){letformatImgs=[]if(Array.isArray(backimgData)){//因为该组件单选是对象，多选是数组formatImgs=backimgData.map(function(item,index){return{attachment:attachUrl+item,ext:"",filename:"",filesize:"",group_id:"",height:"",name:"",width:"",url:attachUrl+item,isImage:true}})}else{letformatImg={attachment:attachUrl+backimgData,ext:"",filename:"",filesize:"",group_id:"",height:"",name:"",width:"",url:attachUrl+backimgData,isImage:true}formatImgs.push(formatImg)}returnformatImgs},//图片上传完成后清除不符合标准的值delImgFormat(imgData){for(let[key,value]ofimgData.entries()){if(value.file){imgData.splice(key,1)}}},
Vue学习笔记