React：使用Upload结合react-cropper插件实现拖拽裁切已选图片，点击确定时再上传图片

功能需求：先在本地选择一张图片后，在页面上可以对所选的图片通过拖拽裁切框，在右侧预览裁切框内的图片部分，最后通过点击确定按钮上传预览的图片部分。

import React, {
    memo, useEffect, useState, useRef } from 'react';
import {
    Button, Upload } from 'antd';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

function Index() {
   
    const [avatarImg, setAvatarImg] = useState();
    const cropperRef = useRef(null);
    const [imageUrl, setImageUrl] = useState('');
    const [imageType, setImageType] = useState('');
    
    const uploadProps = {
   
        name: 'file',
        action: exactUploadUrl,
        accept: 'image/png, image/jpg, image/jpeg, image/gif, image/bmp',
        headers: {
   
          Authenticate: getToke(),
        },
        beforeUpload: (file) => {
   
          const picType = ['image/png', 'image/jpg', 'image/jpeg', 'ima