实现antd的Upload组件复制粘贴上传文件

记录一下工作中学习，需求背景：用户在上传项目中遇到的问题图片时，需要先用截图工具保存图片到本地，然后再点击上传按钮来上传图片，操作繁琐，能不能像聊天工具一样支持复制粘贴上传。需求描述：支持用户粘贴上传图片。

首先

先展示一下项目中使用上传组件的逻辑，展示不了公司代码，就自己写的小demo，代码有待优化。

import React, {
    useEffect, useState } from 'react';
import {
    Upload, Modal } from 'antd';
import * as _ from 'lodash'
import {
    PlusOutlined } from '@ant-design/icons';

export default function UploadPicture() {
   
    const [fileList, setFileList] = useState([]);
    const [previewVisible, setPreviewVisible] = useState(false);
    const [previewImage, setPreViewImage] = useState();
    const [previewTitle, setPreviewTitle] = useState('');

    /** 上传图片的按钮 */
    const uploadButton = (
        <div>
            <PlusOutlined />
            <div style={
   {
    marginTop: 8 }}>Upload</div>
        </div>
    );

    /** 文件转化成64位 */
    const getBase64 = (file) => {
   
        return new Promise((resolve, reject) => {
   
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }

    /** 图片预览 */
    const handlePreview = async file => {
   
        if (!file.url && !file.preview) {
   
            file.preview = await getBase64(file.originFileObj);
        }

        setPreViewImage(file.url || file.preview);
        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
        setPreviewVisible(true<