多图上传:
<van-uploader v-model="picList" :multiple="true" :after-read="afterRead" :max-count="5">
<div class="d-flex-pk ">
<div class="upLoadImg position-relative">
<div class="imgDr">
<img src="../../../assets/images/camera.png" alt="" width="25" height="20">
</div>
<div class="upImg text-main-pk">上传图片</div>
</div>
</div>
</van-uploader>
Js:
const formData=new FormData();
//将formData放在外面,避免每次选择图片都初始化。
return {
picList: [],
formData:formData,
}
methods:{
afterRead(file) {
this.$toast.loading();
for (let i = 0; i < file.length; i++) {
//'files':后台接收的参数
this.formData.append('files', file[i].file);
//此时可以上传图片到服务器
}
//若要进行删除图片列表中的图片操作,则先获取到图片数组,将下面这部到提交的时候再执行
//api接口:images
this.$api.images(this.formData).then(res=>{
this.$toast.clear()
let result=this.$resData(res)
if(result) {
this.picList = result;
}else{
this.$toast({
message:"上传图片失败"
})
return
}
})
},
}