file api 是唯一合规方案，因浏览器禁止 fetch('file://') 读取本地文件；必须通过用户主动选择（如 ）获取 file 对象，再用 filereader 异步读取，且每次需新建实例、显式指定编码防乱码。
为什么直接用 fetch('file:///...') 会失败
浏览器出于安全限制，对 file:// 协议下的跨源请求（包括读取同目录下的文件）默认拦截——哪怕只是读个本地 data.json，也会报 CORS error 或 net::ERR_FAILED。这不是代码写错了，是协议层堵死了这条路。File API 的设计初衷就是绕过这个限制：它不靠 URL 加载，而是让用户主动选择文件，赋予页面一次性的、受控的读取权限。
用 input[type="file"] 触发 File API 读取流程
核心不是“自动读”，而是“用户点选后读”。必须通过用户交互（点击、拖放）触发，否则现代浏览器会静默拒绝 FileReader 操作。
- HTML 中放一个
<input type="file" id="fileInput">，不要设hidden或用 JS 自动 click —— 大部分浏览器会忽略 - 监听
change事件，从event.target.files[0]拿到File对象（它是Blob的子类） - 用
FileReader读取：reader.readAsText(file)适合文本，reader.readAsArrayBuffer(file)适合二进制 -
reader.onload回调里，结果在reader.result，不是event.target.result
<input type="file" id="fileInput"><div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
document.getElementById('output').textContent = reader.result;
};
reader.onerror = () => console.error('读取失败:', reader.error);
reader.readAsText(file, 'UTF-8'); // 显式指定编码，避免乱码
});
</script>
FileReader 的三种读取方法怎么选
不同场景对应不同方法，选错会导致数据损坏或解析失败：
-
readAsText(file, encoding)：读文本文件（.txt,.json,.csv），必须传编码（如'UTF-8'），否则中文可能变 -
readAsDataURL(file)：生成data:URL，适合预览图片/音频，但大文件会撑爆内存，且后续还得再解码 -
readAsArrayBuffer(file)：读原始字节，适合处理.xlsx,.pdf等二进制格式，配合Uint8Array或TextDecoder解析
注意：FileReader 是单次异步操作，不能复用；每次读新文件都要新建实例。
想“自动读同目录文件”？只能换方案
如果目标是启动 index.html 就自动加载同级的 config.json，File API 做不到——它没有“列出目录”或“无交互读文件”的能力。可行路径只有两条：
- 改用本地开发服务器：运行
npx serve或python3 -m http.server，让页面走http://localhost:3000/，此时fetch('./config.json')正常工作 - 打包时内联：用构建工具（如 Vite、Webpack）把配置文件内容注入 HTML 或 JS 变量，变成硬编码，失去运行时灵活性
强行用 Electron 或 Tauri 是过度设计；用 chrome-extension:// 协议需要打包和权限声明，已脱离纯 HTML 场景。真正的“纯静态 HTML + 本地双击运行”下，File API 是唯一合规出口，但它要求用户伸手点一下。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
