javascript如何读取本地文件_FileReader对象有哪些方法？

幻影之瞳 2026-01-15 00:00:00 次阅读

FileReader读取本地文件必须通过用户触发的获取File对象，不能直接用路径；readAsText(file,"UTF-8")最常用，readAsDataURL适合图片预览，readAsArrayBuffer适合二进制处理，readAsBinaryString已废弃；需先绑定onload再调用read，且大文件应分片处理。

FileReader 读取本地文件的核心流程

必须通过用户主动触发的文件选择操作（比如）才能获取 File 对象，直接用路径字符串 new FileReader().readAsText("a.txt") 是无效的——浏览器禁止 JS 主动访问任意本地路径。

正确链路是： → 监听 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 为空 / 中文变问号

这三个问题基本都出在事件监听时机或参数遗漏上。

没绑定 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;
const reader = new FileReader();
// ✅ 必须先设回调，再调 read
reader.onload = () => {
console.log(reader.result); // 正确取值位置
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
// ✅ 显式指定 UTF-8 防止中文乱码
reader.readAsText(file, 'UTF-8');
});