关于vant组件上传图片上遇到的一些问题
<van-cell required title=“事项图片” value=“(最多支持上传3张图片)” />
<van-uploader
v-model="fileList"
:before-read="beforeRead"
:after-read="onReadIdCardback"
:before-delete="beforeDeleteBack"
:max-size="5*1024*1024"
upload-text=“拍照上传"
multiple
:max-count="3"
accept="image/*"
@oversize="onOversize"
/>
// capture=“camera" 这个属性是直接调取相机拍照,如果需要相册选择加拍照共同使用的话就不加这个属性就行了,我的项目需要相册和相机共同使用所以就没有加这个属性。
// 上传文件格式判定
beforeRead(file){
if(file.type==='image/jpeg'||file.type==='image/png'||file.type==='image/jpg'){
return true
}
this.$toast.fail(‘请上传正确格式的图片!')
return false
},
// 文件上传大小限制
onOversize(file){
this.$toast.file(‘图片大小不能超过5M!')
},
// 文件上传
onReadIdCardBack(file){
let params=new FormData();
params.append('file',file.file);
params.append('isPermission','N');
this.$axios(params).then((res)=>{
// 根据自己的实际情况组装数据,我这里上传的文件需要图片的ID和name所以我就用一个对象picture装起来,
然后把数据push到pictureList数组中去
let picture={};
picture.attachmentId=res.data.DATA.attachId;
picture.attachmentName=res.data.DATA.attachName;
this.pictureList.push(picture)
}).catch((e)=>{
})
},
// 照片文件删除
beforeDeleteBack(file,detail){
return new Promise((resolve,reject)=>{
this.$dialog.confirm({
message:’确定删除图片?'
}).then(()=>{
this.pictureList.splice(detail.index,1)
this.$toast.success(‘删除成功')
resolve()
}).catch((error)=>{
this.$toast.success(‘已取消')
reject(error)
})
})
},
// 图片下载请求
downimgData(id){
this.$axios(getImgByType('attach',id)).then((res)=>{
if(res.data){
// 这一步就是请求到图片数据然后获取图片路径push到渲染的数组中去
this.imgs.push(window.URL.createObjectURL(res.data));
// 这一步是先将图片上传v-model绑定的值置空
this.fileList=[];
// 遍历数组中的所有图片获取url路径,再将路径push到v-model绑定的数组中去,
这样数据就可以回填到图片上传的组件中去了,因为我这里的需求是点击上传图片的数据列表,
需要修改的数据点击会跳转的上传的界面对数据进行修改,
那么就需要把之前上传的图片回填到上传组件中来显示,
并可以进行删除修改等操作。根据组件的api显示这里需要将图片数据组装成数组里面是对象的形式,
并且对象的code是url,所以这里我根据自己的实际情况将数据处理成这样就可以回填了。
for(let i=0;i<this.imgs.length;i++){
let img={};
img.url=this.imgs[i];
img.isImage=true;
this.fileList.push(img)
}
}
})
}