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