react-antd中使用Upload实现图片裁剪-上传-预览的功能

前言

使用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: 'https://zos.alipayobjects.com/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>
        <Upload
          action="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给我们提供了很多相关的功能非常方便，大家可以自己去试一试，更多属性参考官方文档，实现这样的功能还是比较简单的，也可以根据自己的需求做上传文件之类的操作