antd pro项目中 antd Upload组件 基于 lrz 在上传前做图片压缩

 

lrz npm和参数文档可供参考

import { Upload,Button} from 'antd';
import lrz from 'lrz';

//处理函数
function compress(file){
   try{
        let ratio=1;
        const {size}=file;
        
        //图片大于1M就压缩，否则不压缩
        if( (size!=undefined)&&size>1048576){

            //将大于1M的图片，压缩后大致使图片大小保持在1M左右
            ratio=1048576/size + '';

            ratio=parseFloat(ratio).toFixed(2);
           
            console.log('开始压缩',ratio);
            return lrz(file,{quality: ratio}).then((rst)=>{//数字越小，压缩率越高
                console.log(rst)
                return backPromise(rst);  
            })
            .catch(()=>{
                console.log('压缩失败');
                return false
            })
        }else{
            console.log('没压缩');
            return true;
        }
    }catch(e){}
}
function backPromise(res){
    return new Promise(function(resolve,reject){
        if(res instanceof Object){

        //将压缩后的base64字符串转换为文件对象

          let file=dataURLtoFile(res.base64,res.origin.name);
          console.log('base64tofile',file);
        
        //需要给文件对象一个唯一的uid属性否则将会报错

          Object.assign(file,{uid:file.lastModified});
            resolve(file);
            console.log('成功')
        }else{
            reject('压缩失败')
        }
     })
     
}

//感谢网友的无私奉献，这段我是copy的，我忘了是谁的了，总之谢谢。
 function dataURLtoFile(dataurl, filename){
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length; 
    var u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    //转换成file对象
    return new File([u8arr], filename, {type:mime});
    //转换成成blob对象
    //return new Blob([u8arr],{type:mime});
}


//页面代码
export default class CompressPict extends React.Component{
    constructor(props){
        super(props);
    }
    beforeUpload=(file)=>{
        console.log('file',file);
        const p=compress(file);

        //官方文档 ：参数为上传的文件，函数若返回 false 则停止上传。
        //支持返回一个 Promise 对象，
        //Promise 对象 reject 时则停止上传
        //resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）。

        console.log(p);
        return p;
    }
   render(){
        return(
          <div>
              <Upload
                //action='上传文件地址'
                listType="picture-card"
                beforeUpload={this.beforeUpload}
                accept='image/*'
              >
                <Button>
                    <Icon type="upload" /> 上传图片
                </Button>
              </Upload>
          </div>
        )
    }
}