vant-uploader实现formData图片上传

## vant-uploader图片上传
<van-col span="24" class="filed">
 <van-col span="24" class="info_img">店铺照片：</van-col>
 <div class="img_box">
  <div class="upload_images" v-for="(item,index) in picture_list" :key="index">
   <img class="image" :src="item"/>
   <div class="icon_close" @click="deleteImg(index)">X</div>
  </div>
  <van-uploader :after-read="uploadFn"
   max-count="5"
   multiple
  />
 </div>
</van-col>
js代码
//上传
      uploadFn(file){
        let formData = new FormData();
        if(file instanceof Array&&file.length){//多图
          for (let i = 0; i < file.length; i++) {
            const element = file[i].file;
            formData.append(["file"+'['+[i]+']'],element);//添加
          }
        }else{//单张
           formData.append(["file"+'['+[0]+']'],file.file);
        }
         axios({
            method: 'post',
            url: '/api/magic_mirror/uploadFile',
            data: formData
          }).then(res => {
            if(res.status==200){
              let total=this.picture_list.length+res.data.data.length;
              if(total>5){//处理图片最多可上传5张
                let Length=(res.data.data.length+this.picture_list.length)-5;
                let num=res.data.data.length-Length;
                let arrImg=res.data.data.splice(0,num);
                this.picture_list.push(...arrImg);
              }else{
                this.picture_list.push(...res.data.data);
              }
            }
          }).catch((err) => {
            console.log(err);
          })
      },
  首先创建formData对象用于存储图片
  uploadFn回调file为当前上传的图片
  单张返回对象，多个返回数组
  instanceof用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
  用于区分单张还是多张
  单张--直接append添加
  多张--循环回调数组，依次把每个图片添加进去
  这里上传用的axios(封装过的接口会有小问题，不做过多阐述)，data直接把formData对象传过去
成功回调status200，push进数组循环出即可
删除splice当前选择元素即可
由于van-uploader没有绑定v-model，图片上传前数量自行判断即可