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中使用时,会出现上传图片后不能正确的显示的问题,经过仔细排查,终于找到原因,解 ...
随机推荐
- LaTeX技巧892: Ubuntu 安装新版本TeXLive并更新
原文地址:http://www.latexstudio.net/archives/9788.html 摘要: 本文比较系统地介绍了在Ubuntu下的TeXLive的安装与配置测试过程,建议使用Ubun ...
- Lua中的类型与值
[基础介绍] Lua是一种动态类型的语言.在语言中没有类型定义的语法,每个值都带有其自身的类型信息.在Lua中有8中基本类型,分别是: nil(空)类型 boolean(布尔)类型 number(数字 ...
- XAMPP环境下配置Phalcon框架
目前环境:win7 xampp 从phalcon 官网下载如下包:https://phalconphp.com/en/download/windows phalcon_x86_vc11_php5.6 ...
- 【原创】大数据基础之Hadoop(3)yarn数据收集与监控
yarn常用rest api 1 metrics # curl http://localhost:8088/ws/v1/cluster/metrics The cluster metrics reso ...
- 手机端调用app导航
因为是在微信端中操作,所以只能使用腾讯地图才能调起手机的腾讯地图app <!doctype html> <html> <head> <meta charset ...
- 导出excel 文件
---恢复内容开始--- 安装 pip install xlwt ---恢复内容结束---
- django中静态文件的配置路径
一 先找到配置文件 二 将配置文件添加上(注意名字一定要大写)
- 如何导出chrome已安装的拓展程序
如何导出chrome已安装的拓展程序 已安装的chrome插件可以在浏览区中输入*chrome://extensions*便可以查看插件列表. 对于windows系统来说,这些插件对应的目录为: C: ...
- net core体系-web应用程序-4asp.net core2.0 项目实战(1)-11项目日志解决方案
本文目录1. Net下日志记录2. NLog的使用 2.1 添加nuget引用NLog.Web.AspNetCore 2.2 配置文件设置 2.3 依赖配置及调用 2.4 日志 ...
- django——模型层之单表
1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...