如何在Ant Design的Upload.Dragger中实现多文件合并为单次请求上传

完全可以实现该需求，核心思路是拦截组件默认的逐个上传逻辑，自行收集所有选中文件后统一提交，具体实现如下：

核心修改点 #

• 新增beforeUpload钩子返回false，禁用组件默认的自动上传行为，仅保留组件的文件选择、拖拽、文件列表管理能力
• 自行维护选中的文件列表，在需要触发上传的时机（点击提交按钮/拖拽完成后），将所有文件封装到FormData中统一发起POST请求

完整实现代码 #

import { Upload, message, Button } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import { useState } from 'react';
import axios from 'axios'; // 也可以用原生fetch替换

const { Dragger } = Upload;

const UploadDemo = () => {
  // 维护选中的文件列表
  const [fileList, setFileList] = useState([]);

  const props = {
    name: 'file',
    multiple: true,
    fileList,
    // 禁用默认自动上传
    beforeUpload: (file) => {
      setFileList(prev => [...prev, file]);
      return false;
    },
    onChange(info) {
      setFileList(info.fileList);
      // 可以在这里加文件大小、格式校验逻辑
    },
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  // 自定义批量提交逻辑
  const handleBatchUpload = async () => {
    if (fileList.length === 0) {
      message.warning('请先选择要上传的文件');
      return;
    }
    const formData = new FormData();
    // 遍历所有文件添加到FormData，字段名和后端约定即可
    fileList.forEach(file => {
      formData.append('files[]', file.originFileObj); // 注意要取originFileObj才是原生文件对象
    });
    try {
      // 发起单次POST请求
      await axios.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      message.success('所有文件上传成功');
      // 上传完成清空文件列表
      setFileList([]);
    } catch (err) {
      message.error('文件上传失败');
    }
  };

  return (
    <div>
      <Dragger {...props}>
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或拖拽文件到该区域上传</p>
        <p className="ant-upload-hint">支持单文件或批量上传</p>
      </Dragger>
      <Button 
        type="primary" 
        onClick={handleBatchUpload} 
        style={{ marginTop: 16 }}
        disabled={fileList.length === 0}
      >
        批量上传
      </Button>
    </div>
  );
};

export default UploadDemo;

注意事项 #

• 从组件的fileList中取原生文件对象时，必须访问originFileObj属性，不能直接用fileList里的对象
• FormData中文件的字段名需要和后端接口约定一致，比如部分后端要求字段为files，可自行调整append的第一个参数
• 如果需要拖拽完成后自动上传，可在onDrop钩子中判断文件收集完成后直接调用handleBatchUpload方法，不需要额外添加提交按钮

内容的提问来源于stack exchange，提问作者kilogram