React中如何获取选中文件夹的路径？

由于浏览器的安全策略，你无法直接获取文件夹的绝对路径字符串，但可以通过File System Access API获取文件夹的句柄，借助这个句柄就能在用户选中的文件夹中创建、写入下载文件。以下是具体实现步骤和示例代码：

核心实现思路 #

1. 触发用户选择文件夹：通过showDirectoryPicker()方法发起文件夹选择请求，该方法必须由用户主动交互（如点击按钮）触发，浏览器不允许无交互的文件系统操作。
2. 保存文件到目标文件夹：利用获取到的文件夹句柄，创建文件并通过可写流写入内容。

React组件示例代码 #

import { useState } from 'react';

function FolderDownloader() {
  const [folderHandle, setFolderHandle] = useState(null);

  // 选择目标文件夹
  const selectFolder = async () => {
    try {
      const handle = await window.showDirectoryPicker();
      setFolderHandle(handle);
      alert('已选中保存文件夹');
    } catch (error) {
      console.error('文件夹选择失败:', error);
    }
  };

  // 将内容保存到选中的文件夹
  const saveFile = async (fileName, fileContent) => {
    if (!folderHandle) {
      alert('请先选择保存文件夹');
      return;
    }

    try {
      // 创建或覆盖目标文件
      const fileHandle = await folderHandle.getFileHandle(fileName, { create: true });
      // 创建可写流
      const writableStream = await fileHandle.createWritable();
      // 写入文件内容
      await writableStream.write(fileContent);
      // 关闭流完成写入
      await writableStream.close();
      alert(`文件 ${fileName} 已成功保存`);
    } catch (error) {
      console.error('文件保存失败:', error);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={selectFolder} style={{ marginRight: '10px' }}>选择保存文件夹</button>
      <button onClick={() => saveFile('downloaded-file.txt', '这是下载的文件内容')}>保存测试文件</button>
    </div>
  );
}

export default FolderDownloader;

注意事项 #

• 兼容性：File System Access API目前主要支持Chrome、Edge、Opera等Chromium内核浏览器，Firefox和Safari的支持程度有限。
• 安全限制：showDirectoryPicker()必须绑定到用户触发的事件（如click），不能在组件挂载等自动逻辑中调用，否则会被浏览器拦截。
• 路径限制：你无法获取文件夹的绝对路径字符串，只能通过FileSystemDirectoryHandle对象操作文件夹内的文件，这是浏览器为了保护用户文件系统安全的设计。

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