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格式）

1、在项目中安装lrz

npm install lrz 

2、在js文件中import lrz

import lrz from 'lrz';

3、项目中具体使用部分代码

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