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

用于：在客戶端壓縮好要上傳的圖片可以節(jié)省帶寬更快的發(fā)送給后端，特別適合在移動(dòng)設(shè)備上使用。

解決了很多問題：

圖片扭曲、某些設(shè)備不自動(dòng)旋轉(zhuǎn)圖片方向，沒有jpeg壓縮算法..
不支持new Blob,formData構(gòu)造的文件size為0..
還有某些機(jī)型和瀏覽器（例如QQX5瀏覽器）莫名其妙的BUG..

按需加載（會(huì)根據(jù)對(duì)應(yīng)設(shè)備自動(dòng)異步載入JS文件，節(jié)省不必要帶寬）

原生JS編寫，不依賴?yán)鏹query等第三方庫，支持AMD or CMD規(guī)范。

基本格式：

lrz(file, [options]);

解釋：

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

[options] ：這個(gè)參數(shù)允許忽略。
    width {Number} 圖片最大不超過的寬度，默認(rèn)為原圖寬度，高度不設(shè)時(shí)會(huì)適應(yīng)寬度；
    height {Number} 同上；
    quality {Number} 圖片壓縮質(zhì)量，取值 0 - 1，默認(rèn)為0.7；
    fieldName {String} 后端接收的字段名，默認(rèn)：file；

返回結(jié)果是一個(gè)promise對(duì)象，有then()、catch()、always三個(gè)方法。

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

1、在項(xiàng)目中安裝lrz

npm install lrz 

2、在js文件中import lrz

import lrz from 'lrz';

3、項(xiàng)目中具體使用部分代碼

onImageChange01 = (files01, type, index) => {
        console.log(files01, type, index);
        if(type==='add'){
            lrz(files01[0].url, {quality:0.1})
                .then((rst)=>{
                    // 處理成功會(huì)執(zhí)行
                    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>

返回?cái)?shù)據(jù)：

1. base64 : 是壓縮過后base64圖片 , 可直接用于 img.src = rst.base64；

2. base64Len : 是生成后的base64的大小,后端可以通過此值來校驗(yàn)是否傳輸完整 (如果采用base64上傳方式)；

3. file 壓縮后的file對(duì)象，需要注意的是如果壓縮率太低的話，這個(gè)會(huì)是原始的file對(duì)象；

4. fileLen 生成后的圖片的大小，后端可以通過此值來校驗(yàn)是否傳輸完整；

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

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

總結(jié)

以上是生活随笔為你收集整理的ReactJS antd 环境中项目上传图片后压缩（lrz的使用）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。