看了好多个文章总结出来的一个便捷方法。

这里也是参考了这位大佬给的灵感

利用image-conversion 插件直接对图片进行压缩。

下面是使用步骤

效果图

1.安装插件

npm i image-conversion --save

2.在页面引入

import * as imageConversion from 'image-conversion'

3.具体使用方式

1.引入组件

 <van-uploader v-model="fileList" accept="image/*"
 :before-read="beforeRead"
 @change="handleChange"
 @delete="beforeDelete"
 :max-count="6"
 :multiple="true"
 preview-size="85px"
 :after-read="afterRead" />
  data() {
    return {
      fileList: []
}
}

 2.在before-read中对图片压缩

    beforeRead(file) {
//如果开启的是多个图片上传就用这个循环压缩
      if (file instanceof Array) {
        return new Promise(async (resolve, reject) => {
          let newarr = []
          // 500是控制压缩大小的 根据你自己的需要调整 数值越小压缩越小
          for (const i in file) {
            console.log('压缩前', file[i]) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
            const res = await imageConversion.compressAccurately(file[i], 300)
            const newfile = new File([res], file[i].name, { type: res.type, lastModified: Date.now() })
            newarr[i] = newfile
          }
          resolve(newarr)
        })
      } else {
//单个就用这个
        return new Promise((resolve, reject) => {
          console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
          // 500是控制压缩大小的 根据你自己的需要调整 数值越小压缩越小
          imageConversion.compressAccurately(file, 300).then(res => {
            res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
            console.log('压缩后', res)
            resolve(res)
          })
        })
      }
    },

3.最后上传附件到后端

 async savefiles(id, fileList) {
      // 保存附件
      return new Promise(async (resolve, reject) => {
          //这里是防止详情里的url再次上传
        if (fileList.length == 0) {
          resolve()
        }
        for (const file of fileList) {
          if (this.$devTools.isNullorUndefined(file.id)) {
            const formData = new FormData()
            formData.append('file', file.file)
        //这个是模拟的接口
            const res = await uploadFileServlet(this.tablename, id, formData)
          }
        }
        resolve()
      })
    },