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格式)
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对象,里面存了一些原始文件的信息,例如大小,日期等;
文章来自:https://blog.csdn.net/wu_shuxuan/article/details/78902772
ReactJS antd 环境中项目上传图片后压缩(lrz的使用)的更多相关文章
- myeclipse、eclipse中项目复制后(可能无法访问)注意事项 .
.myEclipse 复制后修改名称,访问不到项目 这是因为,你只是改了项目的名称,而没有改 下面是解决方法: 方法 1.右击你的项目,选择“properties”,在“type filter tex ...
- RAC环境中threads变更后如何确保goldengate继续正常复制
转载:http://www.easyora.net/blog/goldengate_rac_threads_remap.html 当rac节点变更的时候,比如我们添加或者删除了集群中的节点,理所当然会 ...
- vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息
(ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助.如果还有其他方法,可以留言,谢谢) 一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则, ...
- .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查(实战)
Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...
- 开发环境中biztalk项目设置注意事项(转)
适用版本:biztalk 2006 适用环境:开发测试环境 在开发过程中,在开发环境中,一定会是一个对项目不断的修改.编译.部署.测试,查看测试结果,发现有问题,然后回到开发环境再修改.编译.部署 ...
- MyEclipse环境的项目改为在Eclipse中运行爬坑记【我】
新检出一个web项目,同事都是运行在MyEclipse中的,我用Eclipse启动, 1.首先是许多jar包报错: 处理方法为 remove掉,然后 选 WEB-INF 下的所有 jar 重新添加 ...
- 如何将其它javaweb项目变成可以成功在自己eclipse环境中运行的javaweb项目?
说明:此文档仅适用于以下两种情况 (1)myeclipse项目需要在eclipse环境中运行 (2)eclipse项目,但是无法在自己的电脑eclipse环境中运行 注意:以下 ...
- Keil环境中建立带FreeRTOS的STM32L项目
本文是网上转载,版权所有. Keil环境中建立带FreeRTOS的STM32L项目 1.先把source文件夹复制至project目录,然后在keil中添加RTOS文件,如图: 其中heap_2.c按 ...
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
AjaxFileUpload 插件是一个很简洁很好用的上传文件的插件,可以实现异步上传功能,但是在 ASP.NET MVC中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
随机推荐
- codeforces 787D - Legacy 线段树优化建图,最短路
题意: 有n个点,q个询问, 每次询问有一种操作. 操作1:u→[l,r](即u到l,l+1,l+2,...,r距离均为w)的距离为w: 操作2:[l,r]→u的距离为w 操作3:u到v的距离为w 最 ...
- Kafka简单使用
前言 这几天在写 shell 脚本,学到不少,但是没啥心得之类的,有空可以写个总结(但是大概率不会发表) 现在不算很忙,想再学一点 消息队列相关知识 目前比较出名的也就 RabbitMQ 和 Kafk ...
- uboot、内核、根文件系统启动流程
[1]Uboot的启动流程 Uboot的启动分为两个阶段. 第一阶段:设置异常向量表,设置ARM核为svc模式,关cache和关mmu, 关看门狗,初始化时钟,串口,内存,初始化栈空间,清bss ...
- MySql新增表的字段,删除表字段
1增加两个字段: create table id_name(id int,name varchar(20));//创建原始数据表 alter table id_name add age int,add ...
- Redis数据类型String
set和get Set带空格的字符串值,这时候就需要使用双引号了,否则会出错 getset getset设置某个key-value,然后把设置之前的值返回来 incr,incrby 和 decr,de ...
- SQL反模式学习笔记21 SQL注入
目标:编写SQL动态查询,防止SQL注入 通常所说的“SQL动态查询”是指将程序中的变量和基本SQL语句拼接成一个完整的查询语句. 反模式:将未经验证的输入作为代码执行 当向SQL查询的字符串中插入别 ...
- day14.生成器迭代器作业
1.写生成器,从文件中读取内容,再每一行读取的内容前加上 ‘***’之后返回给用户 def func(filename): word = input('输入你想找的内容:') with open(fi ...
- php扩展打开不起作用的原因, php数字显示2147483647的原因
因为公司订单id类型是bigint, 而PHP32位最大整数是2147483647 . 所以需要重新下载PHP64位. laravel总是报错 Call to undefined function I ...
- JavaScript之扑朔迷离的this
JavaScript这门语言中,最令人迷惑的地方有三个,闭包.this.原型.针对大多数人,可以利用词法作用域等避开this的坑,但是我们不能一直生活在舒适区,要敢于打破砂锅问到底,对我们来说也是一种 ...
- DPI与DFI技术分析
DPI全称为“Deep Packet Inspection”,称为“深度包检测”.DPI技术在分析包头的基础上,增加了对应用层的分析,是一种基于应用层的流量检测和控制技术,当IP数据包.TCP或UDP ...