ReactJS & antd 环境中项目上传图片后压缩（lrz的使用）

2019年11月6日 248次阅读

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对象，里面存了一些原始文件的信息，例如大小，日期等；

《ReactJS & antd 环境中项目上传图片后压缩（lrz的使用）》

点赞