FileReader读取中文文本方法详解

FileReader读取中文文本看似简单，实则极易因编码不匹配导致乱码，本文深入剖析了三大核心解决方案：首选将文件统一保存为UTF-8并调用`readAsText(file, 'UTF-8')`实现开箱即用的正确解析；针对老旧系统生成的GBK/GB2312文件，则需绕过原生限制，借助`readAsArrayBuffer`配合`iconv-lite`完成二进制解码；同时提供实用的乱码诊断技巧，助你快速定位编码问题——无论你是前端新手还是经验开发者，掌握这些细节都能彻底告别中文读取“？？？”的尴尬现场。

FileReader 读取本地中文文本文件时，关键在于正确设置编码格式，否则容易出现乱码。默认情况下 FileReader 使用 UTF-8 编码，只要文件本身是 UTF-8（含 BOM 或无 BOM）就能正常显示中文；若文件是 GBK、GB2312 等编码，则需额外处理。

确保文件保存为 UTF-8 编码

这是最简单可靠的方案：

• 用记事本、VS Code、Notepad++ 等编辑器打开文本文件
• 选择“另存为”，编码选 UTF-8（Notepad++ 中避免选“UTF-8-BOM”，除非明确需要）
• 保存后用 FileReader 读取，reader.result 就会正确显示中文

使用 FileReader.readAsText() 并指定编码

FileReader 支持第二个参数指定编码，可显式声明 UTF-8：

const reader = new FileReader();
reader.onload = function() {
  console.log(reader.result); // 正确的中文内容
};
reader.readAsText(file, 'UTF-8'); // 显式传入编码

注意：该参数在部分旧版浏览器（如 IE）中不被支持，但现代 Chrome/Firefox/Edge 均支持。

处理非 UTF-8 编码的文件（如 GBK）

FileReader 原生不支持 GBK 解码。如必须读取 GBK 文件，需借助第三方库转换：

• 引入 iconv-lite 的浏览器版（如 iconv-lite.min.js）
• 先用 readAsArrayBuffer() 读取二进制数据
• 再用 iconv-lite 将 ArrayBuffer 转为字符串：iconv.decode(new Uint8Array(buffer), 'gbk')

示例片段：

const reader = new FileReader();
reader.onload = function() {
  const uint8Array = new Uint8Array(reader.result);
  const text = iconv.decode(uint8Array, 'gbk');
  console.log(text); // 正确解析的中文
};
reader.readAsArrayBuffer(file);

验证读取结果是否乱码的小技巧

可在控制台快速检查：

• 打印 reader.result.length 和 JSON.stringify(reader.result) —— 若中文变成 "\\u597d" 类似转义，说明是正常 UTF-8；若出现 或空格、问号，则大概率编码不匹配
• 用浏览器开发者工具的 Network 面板拖入文件，查看响应头或预览，辅助判断原始编码

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~