在JavaScript中如何通过指定文件路径读取对应文件？

浏览器的沙箱安全机制禁止网页代码未经用户主动授权直接读取本地文件系统的任意路径，因此你期望的new File('本地路径')写法在浏览器环境下无法原生实现，这是浏览器刻意设计的安全策略，用于避免恶意站点窃取用户本地隐私文件。

根据你的实际使用场景，可以用以下替代方案实现同等需求：

场景1：访问当前站点的静态资源 #

如果目标文件是你站点部署的静态资源，不需要读取用户本地文件，可以通过fetch拉取资源后转成File对象，只要资源和站点同域、或资源配置了允许你站点跨域访问的CORS规则，就不会触发跨域报错，实现逻辑同样轻量：

// 封装方法：传入资源路径和自定义文件名，返回File对象
async function pathToFile(resourcePath, fileName) {
  const res = await fetch(resourcePath);
  const blob = await res.blob();
  return new File([blob], fileName, { type: blob.type });
}

// 调用示例，和你期望的用法逻辑基本一致
pathToFile('relative/path/to/file.txt', 'custom-name.txt')
  .then(myfile => {
    const fr = new FileReader();
    fr.onload = () => {
      // 输出文件文本内容
      console.log(fr.result);
    };
    fr.readAsText(myfile);
  });

如果之前用fetch报CORS/同源策略错误，基本是以下两种原因：

• 你直接通过file://协议打开本地HTML文件运行代码，file协议下没有同源概念，所有请求都会触发同源限制，只要用本地静态服务器（比如VS Code的Live Server插件、nginx、node-static等）部署运行代码即可解决
• 你请求的是其他站点的资源，对方没有配置允许你站点跨域访问的CORS头，这种情况可以让资源提供方修改CORS配置，或者走你自己的后端服务代理请求该资源

场景2：访问用户本地设备的文件 #

如果目标文件是用户本地的任意文件，必须通过用户主动交互的方式获取File对象，可选方式：

• 标准<input type="file">选择器，用户主动点击选择对应文件
• 拖放API，用户主动把文件拖到你页面的指定区域
• 新版浏览器支持的文件系统访问API，需要用户主动弹窗授权选择文件/目录，之后可以在授权范围内读取对应文件

以上方式获取的都是标准File对象，可以直接传给FileReader使用。

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