1 前言
解決圖片拍攝上傳原圖過大導致上傳時間過長然后超時報錯的問題卸奉。
- 優(yōu)點：壓縮圖片減少上傳時間
- 缺點：圖片會變糊堤器，對于圖片質量要求不高可以使用
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í)行上傳了
