图片压缩插件image-conversion

1 前言

解决图片拍摄上传原图过大导致上传时间过长然后超时报错的问题。

• 优点：压缩图片减少上传时间
• 缺点：图片会变糊，对于图片质量要求不高可以使用

2 安装

安装第三方插件 image-conversion：

npm install --save image-conversion

3 使用

在文件中引入插件：

import * as imageConversion from 'image-conversion'

封装一个方法，输入上传的图片file和需要限制的大小limit，单位是KB，输出一个压缩后的图片Blob

    compressImg (file, limit) {
      return new Promise((resolve) => {
        if (file.size > limit) {
          imageConversion.compressAccurately(file, limit).then(res => {
            resolve(res)
          })
        } else {
          resolve(file)
        }
      })
    }

在文件上传的时候使用，只压缩超过100k的图片：

      const size = file.size / 1024
      console.log(`压缩前${size}k`)
      this.compressImg(file, 100).then(comRes => {
        console.log(`压缩后${comRes.size / 1024}k`)
      })

随便传两张图片：

小于100k图片

大于100k图片

压缩完图片以后便可以执行上传了