前端图片的压缩处理

问题背景

在做后台管理项目，要求上传的图片在10MB以内，超过10MB的前端自行压缩，如果压缩过的图片还超出大小，则提交"图片过大"

解决办法

使用插件image-conversion

1. 安装
   npm i image-conversion -S或yarn add image-conversion -S

2. 使用

import * as imageConversion from 'image-conversion'

// 把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
   if (!isJpgOrPng) {
      console.log('上传头像图片只能是 JPG 或 PNG 格式!')
      return false
   }
   return new Promise((resolve) => {
      // 压缩到100KB，这里的100就是要压缩的大小，可自定义
      imageConversion.compressAccurately(file, 100).then(res => {
         console.log(res)
         resolve(res)
      })
   })
}