React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片(且可控制图片数量)
时间:2019-10-24
本文章向大家介绍React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片(且可控制图片数量),主要包括React+Antd+Antd-Img-Crop实现上传固定大小的裁剪头像或者图片(且可控制图片数量)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
见章知著
1024,程序员们节日快乐!本文主要讲述react配合antd以及react-img-crop第三方库实现一个可控的图片上传功能。
运行项目
需要具有node环境
第三方库安装
1.antd(Upload)安装和初始化
1.1.在代码编辑器(VS-Code或者其他编辑器)代开终端,输入命令行安装antd:
$ yarn add antd --save 或者 $ npm install antd --save
1.2.安装好antd后,修改src/App.css,在新建的项目中引入antd所需要的css样式:
@import '~antd/dist/antd.css';
antd的使用方式有多种,详细方式可以参考官方文档进行使用https://ant.design/docs/react/introduce-cn
2.antd-img-crop安装和初始化
2.1.在antd-img-crop官方文档中,我们优先安装和初始化这个组件:
$ npm i antd-img-crop --save 或者 $ yarn add antd-img-crop --save
在安装和初始化组件方式上,官方文档还有其他方式可以安装初始化组件,更多的安装方式可以参考官方文档:https://www.npmjs.com/package/antd-img-crop
2.2.安装好组件后,在项目中引入组件<ReactCrop />:
import ImgCrop from 'antd-img-crop';
代码实现
安装好相对应的组件后,根据组件官方文档中的简单Example书写实现属于自己的上传图片功能。话不多说,直接上代码:import React, { Component } from 'react';
import ImgCrop from 'antd-img-crop'; //引入图片裁剪组件 import { Upload, Button, Modal, message } from 'antd'; //引入上传、按钮、弹窗等antd组件
//base64图片文件 function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } class UploadImage extends Component { state = { previewVisible: false, previewImage: '', fileList: [], };
//图片预览取消函数 handleCancel = () => this.setState({ previewVisible: false });
//图片预览弹窗函数 handlePreview = async file => { if (!file.url && !file.preview) { file.preview = await getBase64(file.originFileObj); } this.setState({ previewImage: file.url || file.preview, previewVisible: true, }); };
//上传文件改变时的状态,详情可以参考antd的Upload组件API参数 onChange = ({fileList}) => { this.setState({ fileList }); }; render() { const { previewVisible, previewImage, fileList } = this.state;
//根据官方属性定制化裁剪框大小固定的裁剪组件属性 const props = { width: 500, //裁剪宽度 height: 300, //裁剪高度 resize: false, //裁剪是否可以调整大小 resizeAndDrag: true, //裁剪是否可以调整大小、可拖动 modalTitle: "上传图片", //弹窗标题 modalWidth: 600, //弹窗宽度 }; return ( <div> <ImgCrop {...props}> <Upload name="file" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" accept="image/*" listType="picture" fileList={fileList} onPreview={this.handlePreview} onChange={this.onChange} > {fileList.length >= 3 ? null : (<Button>添加图片</Button>)}
{/* {通过三木运算符判断文件列表fileList的长度来决定上传图片的数量,达到控制图片数量的功能} */}
</Upload> </ImgCrop>
{/* {图片预览弹出框:可以实时查看上传的图片} */}
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel} title='Image-Show'> <img alt="example" style={{ width: '100%' }} src={previewImage} /> </Modal> </div> ); } } export default UploadImage;
总结发言
本文以上就是个人在处理上传图片并裁剪需求的心路历程,如有任何不对的地方,还请各位大佬们指指点点!啊哈哈哈啊哈哈哈哈.........
原文地址:https://www.cnblogs.com/BlueBerryCode/p/11734267.html
- BZOJ 2456: mode(新生必做的水题)
- 【专知-PyTorch手把手深度学习教程07】NLP-基于字符级RNN的姓名分类
- Codeforces Round #301 (Div. 2)(A,【模拟】B,【贪心构造】C,【DFS】)
- 【专知-PyTorch手把手深度学习教程06】NLP-Word Embedding快速理解与PyTorch实现: 图文+代码
- [linux][memory]memcmp几种实现和性能对比
- 蒙特卡洛算法及其实现
- 【专知-PyTorch手把手深度学习教程05】Dropout快速理解与PyTorch实现: 图文+代码
- 【专知-PyTorch手把手深度学习教程04】GAN快速理解与PyTorch实现: 图文+代码
- 2017年中国大学生程序设计竞赛-中南地区赛暨第八届湘潭市大学生计算机程序设计大赛题解&源码(A.高斯消元,D,模拟,E,前缀和,F,LCS,H,Prim算法,I,胡搞,J,树状数组)
- 【专知中秋呈献-PyTorch手把手深度学习教程03】LSTM快速理解与PyTorch实现: 图文+代码
- BZOJ 3098: Hash Killer II(新生必做的水题)
- [接口测试 - 基础篇] 04 无法绕过的json解析
- 【专知-PyTorch手把手深度学习教程02】CNN快速理解与PyTorch实现: 图文+代码
- [接口测试 - 基础篇] 03 unittest测试框架了解多少才够?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法