FileReader读取本地文件必须通过用户触发的<input type="file">获取File对象，不能直接用路径；readAsText(file,"UTF-8")最常用，readAsDataURL适合图片预览，readAsArrayBuffer适合二进制处理，readAsBinaryString已废弃；需先绑定onload再调用read，且大文件应分片处理。
FileReader 读取本地文件的核心流程
必须通过用户主动触发的文件选择操作（比如 <input type="file">）才能获取 File 对象，直接用路径字符串 new FileReader().readAsText("a.txt") 是无效的——浏览器禁止 JS 主动访问任意本地路径。
正确链路是：<input type="file" id="fileInput"> → 监听 change 事件 → 取 event.target.files[0] → 传给 FileReader 实例。
FileReader 的四个 readAs\* 方法区别与选型
每个方法对应不同数据类型和使用场景，不能混用；调用后会异步触发 load 或 error 事件，不是返回值。
-
readAsText(file, encoding)：最常用，读成字符串。默认编码是"UTF-8"，中文乱码多因未显式传参"UTF-8" -
readAsDataURL(file)：转成 base64 字符串，适合预览图片或上传前压缩，但大文件会导致内存暴涨 -
readAsArrayBuffer(file)：读成二进制缓冲区，适合处理音频、PDF、加密等底层操作 -
readAsBinaryString(file)：已废弃，不要用；MDN 明确标记为 non-standard，且在现代浏览器中可能返回空字符串
常见错误：onload 没触发 / result 为空 / 中文变问号
这三个问题基本都出在事件监听时机或参数遗漏上。
立即学习“Java免费学习笔记（深入）”；
- 没绑定
onload就调用readAsText()：必须在调用前设置好reader.onload = function() { console.log(reader.result) } -
reader.result在onload外访问：此时读取未完成，值为null；只应在onload回调里取 - 中文显示为 或乱码：
readAsText(file, "UTF-8")第二个参数漏写，或传了错误编码如"GBK"（浏览器不支持） - 重复调用
readAsText()报错InvalidStateError：一个FileReader实例只能执行一次读取，需新建实例
const input = document.getElementById('fileInput');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
<p>const reader = new FileReader();
// ✅ 必须先设回调，再调 read
reader.onload = () => {
console.log(reader.result); // 正确取值位置
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
// ✅ 显式指定 UTF-8 防止中文乱码
reader.readAsText(file, 'UTF-8');
});大文件读取要防卡死，别直接 readAsText
几十 MB 的文本文件用 readAsText 会阻塞主线程、吃光内存、甚至触发浏览器 kill page。真要处理大文件，得切片 + 流式读取。
原生 FileReader 不支持分片，但 File 对象本身有 slice() 方法，配合多次 readAsArrayBuffer + TextDecoder 手动拼接更可控。
更现实的做法是：优先用 Stream API（file.stream()）配 ReadableStream，或者引入 blob-util 等轻量库做分块；纯 FileReader 适合小文件（
