HTML5无法直接读取任意本地文件，唯一合规方式是通过File API：用户主动选择文件后，用FileReader异步读取。readAsText适用于文本文件（需指定UTF-8编码），readAsDataURL用于图片预览，readAsArrayBuffer处理二进制文件。
HTML5 本身没有真正意义上的“文件系统访问 API”能让你像操作系统那样自由浏览、读取任意本地路径。所谓“突破读取限制”，实际是指绕过 fetch('file://...') 被拦截的死路，用合规、安全的方式获取用户授权后的文件内容——核心仍是 File API，不是开放整个硬盘。
为什么不能直接读本地文件？
浏览器禁止网页通过 URL（如 file:///data.json）加载本地资源，这是硬性安全策略：防止恶意页面偷偷读取用户敏感文件（比如 ~/Documents/passwords.txt）。报错常见为 CORS error 或 net::ERR_FAILED，和代码无关，是协议层封禁。
File API 是唯一合规入口
它不依赖路径，靠用户主动交出文件控制权：
- 必须由用户触发（点击
<input type="file">或拖放文件到页面） - 拿到的是
File对象（继承自Blob），含名称、大小、类型等元信息 - 用
FileReader异步读取，每次需新建实例，不可复用 - 读取结果在
reader.result，不在事件对象里
三种读取方式怎么选？
选错会导致乱码或数据损坏：
立即学习“前端免费学习笔记（深入）”；
- readAsText(file, 'UTF-8')：适合 .txt、.json、.csv 等文本文件，编码必须显式指定，否则中文变乱码
- readAsDataURL(file)：生成 base64 字符串，适合图片/音频预览，但大文件会撑爆内存
-
readAsArrayBuffer(file)：读原始字节，处理 .xlsx、.pdf、.zip 等二进制文件，后续需配合
Uint8Array或TextDecoder
拖放支持提升体验，但逻辑不变
拖放只是另一种用户触发方式，底层仍走 File API：
- 监听
dragover和drop事件，阻止默认行为 - 从
event.dataTransfer.files拿FileList - 后续读取流程与
input[type="file"]完全一致
