ant-design的upload组件中实现粘贴上传实例详解

import { Upload } from 'antd';
function PasteUpload() {
  const handleBeforeUpload = (file) => {
    // 处理上传前的逻辑，例如检查文件类型、大小等
    // 如果需要上传，则返回 true；否则返回 false。
    return true;
  };
  return (
    <Upload.Dragger beforeUpload={handleBeforeUpload}>
      {/* 在这里添加上传区域 */}
    </Upload.Dragger>
  );
}

import { Upload } from 'antd';
function PasteUpload() {
  const handleBeforeUpload = (file) => {
    // 处理上传前的逻辑，例如检查文件类型、大小等
    // 如果需要上传，则返回 true；否则返回 false。
    return true;
  };
  const handlePaste = (event) => {
    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) { // 只处理图片类型
        const file = items[i].getAsFile();
        if (handleBeforeUpload(file)) {
          const formData = new FormData();
          formData.append('file', file);
          // 在这里添加上传代码，例如使用 Axios 发送 POST 请求上传文件
        }
      }
    }
  }
  return (
    <Upload.Dragger beforeUpload={handleBeforeUpload}>
      {/* 在这里添加上传区域 */}
      <div onPaste={handlePaste}></div> {/* 在 div 中监听粘贴事件 */}
    </Upload.Dragger>
  );
}

import React from 'react';
import { Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
function PasteUpload() {
  const handleBeforeUpload = (file) => {
    // 处理上传前的逻辑，例如检查文件类型、大小等
    // 如果需要上传，则返回 true；否则返回 false。
    return true;
  };
  const handlePaste = (event) => {
    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) { // 只处理图片类型
        const file = items[i].getAsFile();
        if (handleBeforeUpload(file)) {
          const formData = new FormData();
          formData.append('file', file);
          // 在这里添加上传代码，例如使用 Axios 发送 POST 请求上传文件
          axios.post('/api/upload', formData)
            .then((response) => {
              message.success('上传成功');
            })
            .catch((error) => {
              message.error('上传失败');
            });
        }
      }
    }
  }
  return (
    <Upload.Dragger beforeUpload={handleBeforeUpload}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
      <p className="ant-upload-hint">支持单个或批量上传</p>
      <div onPaste={handlePaste}></div> {/* 在 div 中监听粘贴事件 */}
    </Upload.Dragger>
  );
}
export default PasteUpload;