转载：https://blog.csdn.net/sunddy_x/article/details/123528350

前言

之前图片压缩是公司前辈留下的一个js方法，采用的回调函数处理。最近一个项目为了优化用户体验，在图片上传失败后要根据接口返回的状态值更改页面UI，此时该js方法就会出现异常，于是我找到了 image-conversion。

跳转官方文档

实例

该项目为 Vue + Vant ，此处使用Uploader文件上传执行图片压缩并上传的操作

// template

  


// script
import * as imageConversion from 'image-conversion'

// methods
async afterRead(file) {
  // 此时可以自行将文件上传至服务器
  console.log(file)
  file.status = 'uploading'
  file.message = '上传中...'
  // 将图片精确压缩到600kb
  const blob = await imageConversion.compressAccurately(file.file, 600)
  // Blob转FormData
  const formdata = new FormData()
  // append第三个参数为可选项，此处本项目接口需要
  formdata.append('file', blob, file.file.name)
  // 调用fileUpload接口
  const { code, data } = await fileUpload(formdata)
  // 此处code为接口定义状态码，本项目成功为0
  if (code === 0) {
    file.status = 'done'
    file.message = '上传成功'
    console.log(data)
  } else {
    file.status = 'failed'
    file.message = '上传失败'
  }
}