如何在antd ReactJS Upload组件中选择文件夹？

可以通过Antd Upload组件实现仅选择文件夹的需求，核心是利用原生HTML的directory属性，再配合自定义逻辑处理文件夹内容，具体步骤如下：

一、配置Upload组件开启文件夹选择 #

给Upload组件添加以下关键属性：

• directory: 设置为true，开启文件夹选择模式，此时点击上传按钮会弹出文件夹选择对话框，而非文件选择。
• beforeUpload: 返回false，阻止组件默认的文件上传行为（因为我们需要自行处理文件夹内的文件，而非直接上传整个文件夹）。
• showUploadList: 设置为false，隐藏默认的上传列表（可选，根据UI需求调整）。

二、处理选中的文件夹内容 #

通过Upload的onChange事件获取选中的文件夹对象，再利用原生File API遍历文件夹内的所有文件和子文件夹：

代码示例 #

import { Upload } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons';

const FolderUploader = () => {
  // 递归读取文件夹内所有文件
  const readDirectoryEntries = async (directoryEntry) => {
    const reader = directoryEntry.createReader();
    const entries = await new Promise(resolve => reader.readEntries(resolve));
    
    const fileCollection = [];
    for (const entry of entries) {
      if (entry.isFile) {
        // 读取文件对象
        const file = await new Promise(resolve => entry.file(resolve));
        fileCollection.push(file);
      } else if (entry.isDirectory) {
        // 递归读取子文件夹
        const subFolderFiles = await readDirectoryEntries(entry);
        fileCollection.push(...subFolderFiles);
      }
    }
    return fileCollection;
  };

  const handleFolderSelect = async (info) => {
    const folderFile = info.file.originFileObj;
    if (!folderFile?.webkitEntries?.length) return;

    const folderEntry = folderFile.webkitEntries[0];
    if (!folderEntry.isDirectory) return;

    // 获取文件夹内所有文件
    const allFiles = await readDirectoryEntries(folderEntry);
    console.log('文件夹内所有文件：', allFiles);
    
    // 这里可添加自定义逻辑，比如批量上传文件到服务器
    // const formData = new FormData();
    // allFiles.forEach(file => formData.append('files', file));
    // await fetch('/api/upload', { method: 'POST', body: formData });
  };

  return (
    <Upload
      directory
      beforeUpload={() => false}
      onChange={handleFolderSelect}
      showUploadList={false}
    >
      <button type="button" style={{ padding: '8px 16px', cursor: 'pointer' }}>
        <FolderOpenOutlined /> 选择文件夹
      </button>
    </Upload>
  );
};

export default FolderUploader;

三、注意事项 #

• 兼容性：directory属性是HTML5原生特性，仅支持Chrome、Firefox、Edge等现代浏览器，IE浏览器不支持。
• 递归遍历：处理嵌套文件夹时需用递归逻辑，注意避免过深嵌套导致栈溢出（常规场景下无需担心）。
• 文件上传：若需上传文件夹内的文件，需将收集到的File对象逐个添加到FormData中，再通过HTTP请求批量上传，无法直接上传整个文件夹。

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