ReactJS antd 環境中項目上傳圖片後壓縮（lrz的使用）

lrz說明 ( github地址 ：https://github.com/think2011/localResizeIMG )

用於：在客戶端壓縮好要上傳的圖片能夠節省帶寬更快的發送給後端，特別適合在移動設備上使用。

• 解決了不少問題：

  • 圖片扭曲、某些設備不自動旋轉圖片方向，沒有jpeg壓縮算法..
  • 不支持new Blob,formData構造的文件size爲0..
  • 還有某些機型和瀏覽器（例如QQX5瀏覽器）莫名其妙的BUG..

• 按需加載（會根據對應設備自動異步載入JS文件，節省沒必要要帶寬）

• 原生JS編寫，不依賴例如jquery等第三方庫，支持AMD or CMD規範。

基本格式：

lrz(file, [options]);

解釋：

file： 經過 input:file 獲得的文件，或者直接傳入圖片路徑。

[options] ：這個參數容許忽略。
    width {Number} 圖片最大不超過的寬度，默認爲原圖寬度，高度不設時會適應寬度；
    height {Number} 同上；
    quality {Number} 圖片壓縮質量，取值 0 - 1，默認爲0.7；
    fieldName {String} 後端接收的字段名，默認：file；

返回結果是一個promise對象，有then()、catch()、always三個方法。

用法：（在react中，配合antd-mobile的ImagePicker 圖片選擇器使用lrz壓縮圖片，壓縮後的圖片是base64格式）

一、在項目中安裝lrz

npm install lrz 

二、在js文件中import lrz

import lrz from 'lrz';

三、項目中具體使用部分代碼

onImageChange01 = (files01, type, index) => {
        console.log(files01, type, index);
        if(type==='add'){
            lrz(files01[0].url, {quality:0.1})
                .then((rst)=>{
                    // 處理成功會執行
                    console.log('壓縮成功')
                    console.log(rst.base64);
                    this.setState({
                        imagesrc01:rst.base64.split(',')[1],
                    })
                })
        }else{
            this.setState({imagesrc01:''})
        }
        this.setState({
            files01,
        });
    }

 <div className="ImageFlex">
     <div className="ImageTitle"> 身份證正面照片：</div>
     <p className="ImageTip"> 支持jpg,png,gif,bmp,psd,tiff等圖片格式</p>
     <ImagePicker
        files={files01}
        onChange={this.onImageChange01}
        onImageClick={(index, fs) => console.log(index, fs)}
        selectable={files01.length < 1}
        multiple={this.state.multiple}
    />
 </div>

返回數據：

1. base64 : 是壓縮事後base64圖片 , 可直接用於 img.src = rst.base64；

2. base64Len : 是生成後的base64的大小,後端能夠經過此值來校驗是否傳輸完整 (若是採用base64上傳方式)；

3. file 壓縮後的file對象，須要注意的是若是壓縮率過低的話，這個會是原始的file對象；

4. fileLen 生成後的圖片的大小，後端能夠經過此值來校驗是否傳輸完整；

5. origin 也就是原始的file對象，裏面存了一些原始文件的信息，例如大小，日期等；

 

 

 

文章來自：https://blog.csdn.net/wu_shuxuan/article/details/78902772