17370845950

File API 不能直接读写本地文件系统

JavaScript 在浏览器中无法像 Node.js 那样用 fs.readFile 直接访问任意路径的文件——这是安全限制，不是 API 缺失。File API 的核心作用是**响应用户主动选择的文件**，比如通过 或拖拽，它提供的是只读、临时、内存内的文件引用。

如何正确获取并读取用户选中的文件

关键步骤是监听用户输入，拿到 File 对象（注意：它是 Blob 的子类），再用 FileReader 解析内容。常见错误是试图在未触发用户交互时预加载或硬编码路径。

• input.files 是一个 FileList，哪怕只选一个文件也要用 input.files[0]
• 必须用 FileReader 的异步方法（readAsText / readAsArrayBuffer），不能同步读取
• 读取完成要监听 load 事件，而不是直接取 reader.result
• 大文件慎用 readAsText，容易卡顿；优先考虑 readAsArrayBuffer + TextDecoder

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = () => {
    console.log('文件内容：', reader.result);
  };
  reader.onerror = () => {
    console.error('读取失败：', reader.error);
  };
  reader.readAsText(file, 'UTF-8');
});

File API 常见误用和兼容性注意点

很多人以为 File 对象能当路径用，或者想绕过用户选择直接“打开 C:\xxx.txt”——这在标准浏览器中完全不可行。另外，部分老版本 Safari 对 FileReader 的 progress 事件支持不完整，上传大文件时进度反馈可能为空。

• file.path 在 Chrome/Firefox 中始终为 ""（空字符串），仅某些 Electron 或 WebView 环境下有值，不可依赖
• URL.createObjectURL(file) 可生成临时 URL 用于 或 ，但记得用完调 URL.revokeObjectURL() 防内存泄漏
• 需要写文件？浏览器原生不支持。只能靠后端接口上传，或使用 showSaveFilePicker()（需 HTTPS + Chrome/Edge 97+，且用户必须主动触发）

替代方案：什么时候该换思路

如果你的需求本质是“保存配置”“缓存数据”或“导出日志”，别硬刚 File API。更实际的做法是：

• 用 localStorage 或 IndexedDB 存结构化数据
• 用 download 属性 + Blob 触发下载：
• 需要真正文件系统访问？转向 FileSystem Access API（目前仅 Chromium 系主流支持），但它仍要求用户点击授权，不是无感操作

File API 不是文件系统 API，它只是用户与文件之间的一道受控桥梁。所有绕过用户显式授权的操作，要么被浏览器拦截，要么只在特定嵌入环境（如 Electron、Tauri）里可行。