600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > antd pro项目中 antd Upload组件 基于 lrz 在上传前做图片压缩

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

时间:2024-08-22 12:00:23

相关推荐

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 ponent{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>)}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。