Vue + iView 項目中，文件上傳組件Upload增加壓縮圖片功能（使用 image-conversion）

對上傳圖片進行壓縮的需求是非常常見的，簡單來說，解決方式就是將圖片base64或者canvas進行壓縮轉化，有很多工具包可以實現這種需求

以Vue + iView 為例：用的是image-conversion （大部分UI組件的上傳都有相同的鈎子方法，大同小異）

1.安裝依賴+組件中引入

npm i image-conversion 

import * as imageConversion from 'image-conversion'

2.Upload組件

<Upload
      ref="uploader"
      name="file"
      :type="(readonly || !isImage)?'select':type"
      :accept="acceptType"
      :max-size="maxSize"
      :beforeUpload="beforeUpload"
      :on-success="handleSuccess"
      class="posi-rela"
    >

　　

　其中最重要的就是  beforeUpload 這個方法，他會在文件上傳之前執行，我們可以在這里進行圖片的壓縮

3.beforeUpload方法

beforeUpload(file) {
            return new Promise((resolve, reject) => {
                console.log('壓縮前', file) // 壓縮到400KB,這里的400就是要壓縮的大小,可自定義
                imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
                    res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
                    console.log('壓縮后', res);
                    resolve(res)
                })
            })
        }

　調用imageConversion內的方法，這里需要注意的是，壓縮后返回的是blob對象，而Upload組件需要接收到File文件對象才會將壓縮后的進行上傳，

否則不起作用，所以這里要對返回值處理成File對象

 

這樣就實現了圖片上傳前的壓縮處理。