如何读取本地文件_html5文件读取api操作指引

FileReader读取中文乱码需显式指定编码，如readAsText(file, 'GBK')；若编码未知，先用readAsArrayBuffer()配合TextDecoder尝试解码。

不能直接读取本地文件路径，必须由用户主动触发选择（如 <input type="file"> 或拖放），这是浏览器安全策略强制要求的底线。

FileReader 读取文本文件时乱码怎么办

常见错误现象：用 readAsText() 读取中文文本显示为 或其他乱码字符。

• 默认编码是 UTF-8，但很多 Windows 上保存的 .txt 文件实际是 GBK/GB2312 编码
• readAsText(file, encoding) 第二个参数可显式指定编码，例如 readAsText(file, 'GBK')
• 若不确定编码，可先用 readAsArrayBuffer() 读取原始字节，再用 TextDecoder 尝试多种解码（如 new TextDecoder('gbk')）
• 注意：Chrome 120+ 对非 UTF-8 编码支持仍有限，部分旧版 GBK 文件需后端转码或前端用第三方库（如 iconv-lite 的 WebAssembly 版本）

预览图片时该用 readAsDataURL 还是 createObjectURL

两者都能实现预览，但内存占用和生命周期完全不同。

• readAsDataURL() 生成 base64 字符串，体积比原图大 ~33%，且会常驻内存直到 DOM 节点被 GC —— 大图反复预览容易 OOM
• URL.createObjectURL(file) 创建的是轻量级 Blob URL，不复制数据，只建立引用；但必须手动调用 URL.revokeObjectURL() 释放，否则内存永不回收
• 推荐做法：小图（readAsDataURL 简单省事；大图或需频繁切换预览时，优先用 createObjectURL 并在 img.onload 后立即 revoke

读取大文件（>100MB）卡顿或失败

不是 FileReader 本身限制，而是浏览器对单次内存分配和事件循环阻塞的容忍度问题。

立即学习“前端免费学习笔记（深入）”；

• onprogress 事件能拿到 e.loaded 和 e.total，但仅对 readAsArrayBuffer 有效，readAsText 和 readAsDataURL 不触发
• 避免一次性读整个大文件：改用 Blob.slice() 分块读取，例如每次读 4MB，拼接处理
• 关键细节：分块读取时，slice() 的起始偏移必须对齐文件格式边界（如 PNG 的 IHDR 块不能被切开），否则解析失败
• 真正的大文件分析（如视频帧提取、CSV 行解析）建议用 Streams API + ReadableStream，但兼容性需查 Can I Use

FileReader 是异步的，但它的回调（onload）仍跑在主线程；如果后续解析逻辑很重（比如解析 50MB JSON），UI 依然会卡住 —— 这点容易被忽略。