vant图片上传删除小技巧

需求，多个 上传图片，保存后端返回的id，进行请求互传

简单使用 类似这种有多个上传接口

<van-uploader v-model="ruleForm.fileList"
              :after-read="OnAfterRead"
              :before-read="beforeRead"
                max-count="1">
              <div class="file-box">
                <van-icon name="plus" size="30"/>
                <p class="font-12">低保证明</p>
              </div>
            </van-uploader>

需要在上传时候进行一些操作 ，判断类型等，给后端传入文件流返回图片id等各种操作

 /*文件上传 前 进行基础判断*/
    beforeRead(file) {
      let file_size=file.size/1024/1024
      if (file_size>5.1){
        Toast.fail({
          message: '图片过大,请重新选择图片',
          forbidClick: true,
        })
        return false
      }
      if (file instanceof Array && file.length) {
        if (file.type !== 'image/jpeg' & file.type !== 'image/png' & file.type !== 'image/jpg') {
          this.$toast.fail('请选择正确图片格式上传')
        }
        return file
      } else {
        if (file.type !== 'image/jpeg' & file.type !== 'image/png' & file.type !== 'image/jpg') {
          this.$toast.fail('请选择正确图片格式上传')
          return
        }
        return file
      }
    },
    /*图片上传完成后进行数据回传返回图片id*/

    async OnAfterRead(file,detail) {
      const vm = this;
      const form = new FormData();
      let name_url = file.file.name.split(".")
      form.append("image_type", name_url[name_url.length - 1]);
      form.append("file", file.file,form.file);
      const res = await vm.http.post(vm.api.Imagefileupload, form);
      if (res.code === 200) {
      vm.file_l=(res.content.data.id)
      } else {
        Toast.fail(res.message);
      }
    },

以上是正常操作，会发现在有多个图片后，如果用户进行图片删除，那么我们相对应的图片偶读不能继续留存，也要进行删除，那么从哪里删除呢，或者怎么做到，这里分享一个小技巧，当然道路千万条，肯定有比这更好的方法

上干货，就改两个地方，第一个就是在上传完成回调里面传参，后面这个filelist可以随意

:after-read="(file,detail)=>OnAfterRead(file,detail,'fileList')"

 就像这样

 <van-uploader v-model="ruleForm.fileList"
                :after-read="(file,detail)=>OnAfterRead(file,detail,'fileList')"
                :before-read="beforeRead"
                 max-count="1">
              <div class="file-box">
                <van-icon name="plus" size="30"/>
                <p class="font-12">低保证明</p>
              </div>
            </van-uploader>

第二处就是请求的时候 传回的id我们之间以我们传进来的name为kay，保存在对象里，这样不管你咋删除图片（前提是不能让他在未提交图片的时候不能进行提交操作）他会存在你的对象内一遍一遍覆盖，如下

 /*图片上传完成后进行数据回传返回图片id*/
    async OnAfterRead(file,detail,name) {
      const vm = this;
      const form = new FormData();
      let name_url = file.file.name.split(".")
      form.append("image_type", name_url[name_url.length - 1]);
      form.append("file", file.file,form.file);
      const res = await vm.http.post(vm.api.Imagefileupload, form);
      if (res.code === 200) {
      vm.file_l[name]=(res.content.data.id)
      } else {
        Toast.fail(res.message);
      }
    },

 当然方法肯定有，这个是我遇到的然后（摸）解（鱼）决的办法