1 前言

解決圖片拍攝上傳原圖過大導(dǎo)致上傳時間過長然后超時報錯的問題。

• 優(yōu)點：壓縮圖片減少上傳時間
• 缺點：圖片會變糊，對于圖片質(zhì)量要求不高可以使用

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圖片

壓縮完圖片以后便可以執(zhí)行上傳了