vue+element中使用lrz对图片进行压缩后保存

一、使用element上传组件上传文件时,为了避免图片过大造成不必要的后端资源浪费,于是决定使用lrz对上传的图片文件进行压缩后再传输给后端。

二、使用简述:

 1.引入lrz后终端下载依赖npm install lrz -- save

引入lrz

2.简单使用element上传组件

el-upload使用

3.在upload方法中处理图片

upload中对file文件进行处理

①.获取file对接中的size大小先做一层大小限制,然后通过URL.createObjectURL获取当前file.raw文件流的内存URL并设置lrz的配置参数{ quality: 0 },quality表示图片压缩的质量,取值为 0 - 1,默认为0.7,越小压缩得越狠,除外还可设置width (宽)、height (高)、fieldName (文件名等参数);

②后续在lrz方法中传入当前URL,在then方法中通过获取回调参数进行下一步操作,ret.formData为后端可处理的数据,rett.file为压缩后的file对象,ret.fileLen是 生成后的图片的大小,ret.base64 生成后的图片base64,ret.origin是原始的file对象,我这边只需要传base64就行了,基本就完成了本次任务,其余看后端需求来,最后,记得URL.revokeObjectURL释放一下内存,我这里没写~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容