vant 上传图片前压缩问题

Question

          <van-uploader
            v-model="license"
            :after-read="afterRead"
            :before-delete="delUpload"
            :before-read="beforeRead"
            multiple
            name="license"
            :max-size="15000 * 1024" 
            @oversize="onOversize"
          />

js

import { compressAccurately } from 'image-conversion'

    async beforeRead(file) {
      Toast.loading({
        message: '图片压缩中...',
        forbidClick: true,
      });
      if(file.size > 15728640) {
        Toast('文件大小不能超过 15M');
        return
      }
      // 批量上传
      if (file instanceof Array) {
         for await (let i of file) {
             new Promise((resolve) => {
                 return compressAccurately(i, 2048).then(res => {
                    //这里2 * 1024是把大于2M的文件压缩到2M
                    resolve(res);
                })
            })
        }
      } else {
        // 单个上传
        return new Promise((resolve) => {
            compressAccurately(file, 2048).then(res => {
              resolve(res)
            })
        })
      }

    },
    // 文件读取完成后的回调函数
    afterRead(file, detail) {
      Toast.loading({
        message: '上传中...',
        forbidClick: true,
      });
      // 批量上传
      if (file instanceof Array) {
           file.map((v) => {
            let upType = detail.name;
            let upObj = jsonToForm({
              type: upType === "other" ? 2 : 1,
              files: this.typeofFile(v)
            });
            v.status = "uploading";
            v.message = "上传中...";
            this.upLoad(upObj).then(res => {
                v.status = "done";
                v.message = "上传成功";
                this.saveUploadData(upType, res.files);
              }).catch(err => {
                setTimeout( () => {
                  Toast.clear();
                }, 200)
                v.status = "failed";
                v.message = "上传失败";
              });
          });
      } else {
       // 单个上传
        const upType = detail.name;
        const upObj = jsonToForm({
          type: upType === "other" ? 2 : 1,
          files: this.typeofFile(file)
        });
        file.status = "uploading";
        file.message = "上传中...";
        this.upLoad(upObj).then(res => {
            file.status = "done";
            file.message = "上传成功";
            this.saveUploadData(upType, res.files);
          }).catch(err => {
            setTimeout( () => {
              Toast.clear();
            }, 200)
            file.status = "failed";
            file.message = "上传失败";
        });
      }
    },

现在的问题是单个上传的图片进行了压缩，批量上传的图片没有进行压缩，异步还是有问题，压缩还没返回压缩的值，就已经在上传图片了，有大佬遇到过这问题嘛？请教一下

Answer 1

  for await (let i of file) {
             new Promise((resolve) => {
                 return compressAccurately(i, 2048).then(res => {
                    //这里2 * 1024是把大于2M的文件压缩到2M
                    resolve(res);
                })
            })

首先 return 不应在 new Promise 里
其次你怎么知道处理到了最后一张图片

你的for await 很高级用不惯。

方案一 ：

      // 批量上传
      if (file instanceof Array) {

         return new Promise((resolve) => {
         let temp_file = file.map((item)=>{
        return compressAccurately(item, 2048)
        });
         Promise.all(temp_file).then((result) => {
       console.log(result)
       resolve()  //所有接口都执行完毕
     })
    
         
         });

}

Answer 2

为什么before-read里面对每个文件进行了压缩，after-read里面读取的file还是没压缩前的