怎么通过HTML的FileReader的readAsArrayBuffer读取文件为原始字节数组-html教程-PHP中文网

readasarraybuffer返回的是arraybuffer（原始内存块），非可直接索引的字节数组；需用uint8array等视图包装才能访问字节，如new uint8array(reader.result)。

怎么通过html的filereader的readasarraybuffer读取文件为原始字节数组

readAsArrayBuffer 读出来的不是“原始字节数组”，而是 ArrayBuffer

很多人以为 readAsArrayBuffer 返回的是类似 Uint8Array 或 number[] 的“字节数组”，其实它返回的是 ArrayBuffer —— 一个不可直接读写的原始内存块。你得用视图（如 Uint8Array）去访问它的字节内容。

常见错误现象：console.log(result) 看到 ArrayBuffer { byteLength: 12345 } 就以为“没读成功”，或试图直接 result[0] 取第一个字节，结果是 undefined。

FileReader.readAsArrayBuffer(file) 异步触发 onload，reader.result 是 ArrayBuffer
要获取可索引的字节序列，必须用 new Uint8Array(reader.result) 包装
如果需要十六进制字符串、base64 或逐字节处理，都基于这个 Uint8Array 操作，而不是原 ArrayBuffer

正确读取并转成可操作的字节序列（Uint8Array）

这是最常被省略的关键一步：不显式构造视图，就等于没真正“拿到字节”。下面是最小可行代码：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

const reader = new FileReader();
reader.onload = () => {
  const buffer = reader.result; // ArrayBuffer
  const bytes = new Uint8Array(buffer); // ✅ 真正的字节数组
  console.log('第一个字节:', bytes[0]); // 比如 71（'G' in GIF）
  console.log('总字节数:', bytes.length);
};
reader.readAsArrayBuffer(file);

注意：Uint8Array 是零拷贝视图，性能无损；不要用 Array.from(bytes) 转成普通数组——那会丢失类型信息且浪费内存。

若需 number[]（比如传给某些老库），可用 Array.from(bytes)，但仅在必要时才做
若后续要写入 Blob 或发送 fetch，直接用 buffer 更高效（fetch 接受 ArrayBuffer）
别在 onloadend 里读 reader.result，应只在 onload 中读；onloadend 不保证成功，需配合 reader.error 判断

常见坑：大文件、中文路径、跨域 Blob URL

FileReader 本身不关心文件名或路径，但实际使用中容易因环境误判失败原因。

大文件（>500MB）可能触发浏览器内存限制或卡死 UI —— 建议加 progress 事件监听，或改用 stream() + ReadableStream 分块读（Chrome/Firefox 支持）
从 <input type="file"> 拿到的 File 对象天然支持中文名，无需额外编码；但如果是通过 URL.createObjectURL(blob) 创建的 URL，再用 fetch 拉回来再读，就可能因 CORS 失败 —— 这种绕路方式纯属自找麻烦
Node.js 环境没有 FileReader，别试图在 Electron 主进程或 Node CLI 里直接用；主进程请用 fs.readFile，渲染进程才用 FileReader

替代方案：什么时候不该用 readAsArrayBuffer？

如果你只是想校验文件头、提取元数据或快速判断类型，readAsArrayBuffer 是对的；但若目标是文本解析、JSON 解析或 HTML 内容提取，用 readAsText 或 readAsDataURL 更直接，也避免手动解码。

读文本文件（UTF-8/GBK）优先用 readAsText(file, 'utf-8')，自动解码，不用自己处理 TextDecoder
要预览图片或上传 base64，用 readAsDataURL，结果是字符串，开箱即用
需要部分读取（比如只读前 1024 字节判断 magic number），可用 file.slice(0, 1024) 创建子 File，再传给 readAsArrayBuffer，避免加载整文件