前言
使用react中antd实现图片的上传裁剪和预览，记录一下实现过程，希望能对大家有帮助
实现
我们这里用到的是antd框架，实现
图片上传的功能我们需要安装一个插件antd-img-crop
yarn add antd-img-crop
然后就可以进行使用：
import React, {memo, useState } from 'react'import {Upload } from 'antd'import ImgCrop from ' 'export default memo(function Index() {const [fileList, setFileList] = useState([{uid: '-1',name: 'image.png',status: 'done',url: '/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',},]);const onChange = ({fileList: newFileList }) => {setFileList(newFileList);};const onPreview = async file => {let src = file.url;if (!src) {src = await new Promise(resolve => {const reader = new FileReader();reader.readAsDataURL(file.originFileObj);reader.onload = () => resolve(reader.result);});}const image = new Image();image.src = src;const imgWindow = window.open(src);imgWindow.document.write(image.outerHTML);};return (<div><ImgCrop rotate><Uploadaction="https://www.mocky.io/v2/5cc8019d300000980a055e76"listType="picture-card"fileList={fileList}onChange={onChange}onPreview={onPreview}>{fileList.length < 5 && '+ Upload'}</Upload></ImgCrop></div>)})
使用 < ImgCrop rotate>组件，里面使用upload组件，用到的相关属性的作用：
action：上传的地址
listType： 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
fileList：已经上传的文件列表（受控）
onChange：上传中、完成、失败都会调用这个函数。
onPreview：点击文件链接或预览图标时的回调
关于图片上传还有更多的属性，可以参考官方文档
来看一下实现的效果：
antd给我们提供了很多相关的功能非常方便，大家可以自己去试一试，更多属性参考官方文档，实现这样的功能还是比较简单的，也可以根据自己的需求做上传文件之类的操作
