多图上传:

<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

}

})

},

}