FileReader读取带BOM的UTF-8文件时开头出现“”或\uFEFF,是因为其默认用系统编码(如GBK)解码BOM字节0xEF 0xBB 0xBF;正确做法是用readAsArrayBuffer()获取ArrayBuffer,再用TextDecoder('utf-8',{ignoreBOM:true})解码。

FileReader 读取带 BOM 的文件为什么开头多出一个怪字符
因为 FileReader 默认用系统编码(如 Windows 上是 GBK)解码,而带 BOM 的 UTF-8 文件开头三个字节 0xef 0xbb 0xbf 被当成了 GBK 字符,解出来就是乱码“”或 Unicode 字符 \ufeff。这不是内容本身有问题,是解码路径错了。
用 TextDecoder 显式指定 'utf-8' 并忽略 BOM
FileReader 本身不支持传入编码参数,硬靠它读会踩坑;必须配合 TextDecoder 手动解码原始字节流。关键点有两个:ignoreBOM: true 和显式声明 'utf-8' 编码。
- 先用
FileReader.readAsArrayBuffer()读取二进制数据,避免被自动转成错误字符串 - 再用
new TextDecoder('utf-8', { ignoreBOM: true })解码——这个选项能跳过开头的\ufeff,且不影响后续内容 - 不要用
readAsText()+encoding参数:该参数在大多数浏览器中被忽略,不可靠
完整可运行示例(含错误规避)
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
const arrayBuffer = await file.arrayBuffer();
// ✅ 正确:显式 utf-8 + ignoreBOM
const decoder = new TextDecoder('utf-8', { ignoreBOM: true });
const text = decoder.decode(arrayBuffer);
console.log(text); // 开头无 \ufeff,中文正常
});
常见错误写法:reader.readAsText(file, 'utf-8') —— 这个 encoding 参数在 Chrome/Firefox 中基本无效;text.replace(/^\ufeff/, '') —— 只治标,如果文件实际是 GBK 却强行用 utf-8 解,后面全乱。
为什么不用 FileReader.onload 直接拿 result
因为 reader.result 是 FileReader 自己按内部逻辑解码后的字符串,你无法干预它的编码策略。一旦文件带 BOM 且浏览器默认用错编码(比如把 UTF-8 当 GBK),result 就已经损坏了,后面怎么 trim、replace 都救不回来。必须从 ArrayBuffer 这一层介入,掌握解码主动权。
BOM 处理不是加个 .lstrip('\ufeff') 就完事的事——它背后是整个解码链路是否可控的问题。别让浏览器替你猜。

















