如何选择目录内文件并将含相对路径的文件列表存入状态

我之前也踩过类似的坑，试了你提到的那些库，要么是目录选择的回调拆分太细，要么是拿不到完整的相对路径，最后索性用原生的HTML input结合React状态管理实现，完美满足你的三个要求：

核心思路 #

利用原生input的webkitdirectory属性实现目录选择，该属性目前支持Chrome、Edge、Firefox 50+等主流浏览器。通过onChange回调一次性获取目录下所有文件（包括子目录中的文件），并直接从File对象的webkitRelativePath属性提取相对路径。

完整代码示例 #

import { useState } from 'react';

const DirectoryFilePicker = () => {
  // 用于存储包含相对路径的文件列表
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleDirectorySelect = (event) => {
    // 将FileList转换为数组以便处理
    const filesArray = Array.from(event.target.files);
    
    // 提取每个文件的关键信息，重点保留webkitRelativePath
    const filesWithRelativePaths = filesArray.map(file => ({
      fileName: file.name,
      relativePath: file.webkitRelativePath,
      fileSize: file.size,
      mimeType: file.type
    }));
    
    // 一次性更新状态
    setSelectedFiles(filesWithRelativePaths);
  };

  return (
    <div className="directory-picker-container">
      {/* 隐藏原生input，用自定义按钮触发 */}
      <input
        type="file"
        webkitdirectory
        multiple
        onChange={handleDirectorySelect}
        style={{ display: 'none' }}
        id="hidden-directory-picker"
      />
      
      <button onClick={() => document.getElementById('hidden-directory-picker').click()}>
        选择目标目录
      </button>

      {/* 展示选中的文件列表 */}
      {selectedFiles.length > 0 && (
        <div className="file-list">
          <h3>选中的文件（相对路径）：</h3>
          <ul>
            {selectedFiles.map((file, index) => (
              <li key={index}>
                <em>{file.relativePath}</em> - {file.fileSize} bytes
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default DirectoryFilePicker;

满足需求的细节说明 #

• 仅允许选择目录：webkitdirectory属性会让文件选择器直接弹出目录选择界面，用户无法选择单个文件。
• 单个回调捕获所有文件：onChange事件只会触发一次，event.target.files包含所选目录下的所有层级文件，无需处理多次回调的问题。
• 获取相对路径：每个File对象的webkitRelativePath属性就是相对于你选中的根目录的完整路径（例如：选中目录/docs/notes/todo.md），直接提取即可存入状态。

为什么之前的库无法满足？ #

• antd的Upload组件：主要面向上传场景，目录选择的支持有限，且默认不会返回完整的相对路径，需要额外处理。
• react-dropzone：虽然支持目录选择，但默认会将子目录的文件拆分为多个回调触发，或者需要复杂的配置才能一次性获取所有文件的相对路径。
• 其他上传类库：大多聚焦于上传流程，而非本地文件路径的捕获，因此很难同时满足你的三个核心需求。

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