File API 是浏览器原生接口，用于在用户授权后读取本地文件：通过 input 或拖放获取 File 对象，用 FileReader 异步读取，支持 readAsText、readAsDataURL、readAsArrayBuffer 三种方法，适用于预览、校验、离线处理等场景。
File API 是浏览器提供的原生接口，允许网页在用户授权后读取本地文件内容，无需上传到服务器。它核心依赖 File 对象（通常来自 `` 或拖放事件）和 FileReader 对象来异步读取数据。
基础使用步骤
读取文件分三步：获取文件对象 → 创建 FileReader 实例 → 调用读取方法并监听结果。
- 通过
<input type="file" id="fileInput">获取文件：const file = document.getElementById('fileInput').files[0]; - 创建读取器：
const reader = new FileReader(); - 设置回调并启动读取：
reader.onload = () => { console.log(reader.result); };<br> reader.readAsText(file); // 或 readAsDataURL、readAsArrayBuffer
常用读取方法及适用场景
readAsText()：把文件按指定编码（如 UTF-8）转为字符串，适合处理文本类文件（.txt、.json、.csv、.log）。
readAsDataURL()：生成 base64 编码的 URL，可直接赋给 <img src> 或 <audio src>，适合预览图片、音频等二进制资源。
readAsArrayBuffer()：返回原始二进制缓冲区，适用于需要精细操作的场景，比如解析 Excel（xlsx）、PDF 元数据、图像像素处理（配合 Canvas）、或加密/压缩前端计算。
典型应用场景
客户端文件预览：用户选择图片后立即显示缩略图，不发请求；上传前校验 CSV 行数或 JSON 格式是否合法。
离线数据处理：用户导入本地日志文件，前端用正则提取错误信息；加载本地 .geojson 文件并在地图上渲染，不依赖后端接口。
隐私敏感操作：密码管理器类工具让用户本地解密加密文件（密钥不离开浏览器），全程不上传明文。
富媒体编辑器支持：Markdown 编辑器拖入图片自动转为 dataURL 插入；音视频剪辑工具读取本地媒体文件进行时间轴分析。
注意事项与限制
File API 只能读取用户主动选择的文件，无法随意访问磁盘路径——这是浏览器安全模型决定的，不是功能缺陷。
大文件读取需注意内存占用，建议用 slice() 分块读取，或结合 Stream（如 file.stream() + ReadableStream）做流式处理。
IE10+ 支持 FileReader，现代浏览器均兼容；但部分旧安卓 WebView 对 readAsArrayBuffer 支持不稳定，生产环境建议降级兜底。
