React如何通过指定路径选择文件 不弹窗并自动赋值给state

浏览器端默认存在严格的安全沙箱限制，网页脚本无权直接访问用户本地磁盘的任意路径文件，不存在完全无用户授权、直接输入任意本地绝对路径就能读取文件的通用网页端方案，所有可行方案都有对应的适用场景和前提限制

首先明确：直接给<input type="file">的value属性赋值本地路径的操作会被浏览器直接拦截，属于被安全策略禁止的行为，不可能生效。不同场景下的可行实现如下：

• 方案1：基于File System Access API实现（现代浏览器端场景） #

  适用Chrome/Edge 86+等支持该API的现代浏览器，流程如下：

  1. 首次使用时调用window.showDirectoryPicker()，引导用户手动选择需要授权访问的根目录，拿到目录句柄后可以持久化存储到IndexedDB，后续不需要重复授权
  2. 用户在输入框填写授权目录下的相对文件路径时，直接通过已保存的目录句柄调用getFileHandle(输入路径)获取文件句柄，再调用getFile()方法拿到标准File对象
  3. 将拿到的File对象直接赋值到对应state即可，整个后续流程不需要弹出文件选择框
     注意：该方案无法访问授权目录外的文件，Firefox浏览器目前未默认开启该API支持，不兼容低版本浏览器。
     核心代码示例：

  // 首次授权获取目录句柄
  const getRootHandle = async () => {
    const dirHandle = await window.showDirectoryPicker();
    // 申请持久化读权限
    await dirHandle.requestPermission({mode: 'read'});
    setRootDirHandle(dirHandle);
  }
  
  // 输入路径后读取文件
  const loadFileByPath = async (inputPath) => {
    if (!rootDirHandle) return;
    const fileHandle = await rootDirHandle.getFileHandle(inputPath);
    const file = await fileHandle.getFile();
    // 直接赋值到state
    setTargetFile(file);
  }
  

• 方案2：Electron/Tauri等桌面端内嵌React场景 #

  如果React项目运行在桌面端容器中，不存在浏览器沙箱的文件访问限制，可以完全实现需求：

  1. 开启Node集成的Electron环境可以直接在渲染进程引入Node的fs模块，监听输入框提交事件，拿到用户输入的绝对路径后调用fs方法读取文件，转成File/Blob对象后赋值到state
  2. 开启上下文隔离的场景，可以在preload脚本中通过IPC暴露文件读取方法给渲染进程调用，全程不需要弹出文件选择框，只要应用本身有对应路径的读权限即可访问任意本地文件
     核心代码示例（preload暴露接口场景）：

  // preload.js
  const { contextBridge } = require('electron');
  const fs = require('fs/promises');
  
  contextBridge.exposeInMainWorld('desktopAPI', {
    readLocalFile: async (path) => {
      const buffer = await fs.readFile(path);
      return new File([buffer], path.split(/[\\/]/).pop());
    }
  })
  

  // React组件内调用
  const handlePathSubmit = async (inputPath) => {
    const file = await window.desktopAPI.readLocalFile(inputPath);
    setTargetFile(file);
  }
  

• 方案3：读取站点同源静态资源场景 #

  如果用户输入的路径是部署站点下的同源静态资源路径（比如public目录下托管的文件），不需要访问用户本地磁盘，直接通过fetch拉取资源转成File对象即可：

  const loadStaticFile = async (staticPath) => {
    const res = await fetch(staticPath);
    const blob = await res.blob();
    const file = new File([blob], staticPath.split('/').pop(), {type: blob.type});
    setTargetFile(file);
  }
  

  该方案完全不需要用户交互，但只能访问同源可公开访问的静态资源，无法读取用户本地磁盘的私有文件。

• 方案4：匹配历史已选文件场景 #

  如果用户之前已经通过文件选择框上传过文件/选中过整个文件夹，可以提前把所有选中文件的webkitRelativePath和File对象的映射关系存下来，后续用户输入对应路径时直接从映射表里匹配对应的File对象赋值到state即可。该方案不需要重复弹出选择框，但只能访问用户之前主动选中授权过的文件，无法读取未授权的新文件。

内容的提问来源于stack exchange，提问作者Nawaz Moin yaakuza