如何在JavaScript中操作文件与二进制数据_Blob与ArrayBuffer使用详解【教程】

javaScript无法直接读写本地文件，而是通过Blob、File、FileReader等API在内存中处理二进制数据；File是带元信息的Blob；读取内容须用FileReader或arrayBuffer；Blob URL需手动释放以防内存泄漏；下载应使用Blob+a.download组合。

javascript 本身不能直接读写本地文件系统，所谓“操作文件”实际是通过 Blob、ArrayBuffer、File、FileReader 和 URL.createObjectURL() 等浏览器 API 在内存中处理二进制数据流。关键不在于“怎么存到硬盘”，而在于“怎么拿到、转换、传输、渲染或下载它”。

File 对象本质就是 Blob，但有额外元信息

用户通过 选中的文件，得到的是 File 实例。它继承自 Blob，所以所有 Blob 方法都可用，但多了 name、lastModified、webkitRelativePath 等属性。

常见误区是试图用 jsON.Stringify(file) 查看内容——这只会输出空对象，因为 File 的二进制数据不可枚举。真正读取内容必须用 FileReader 或转为 ArrayBuffer。

• file.size 和 file.type 可直接访问，无需异步
• file.slice(start, end, contentType) 返回新 Blob，常用于分片上传
• 不要依赖 file.path：浏览器出于安全限制，该属性始终为空或不可用

ArrayBuffer 是原始二进制内存块，TypedArray 是它的视图

ArrayBuffer 本身不可读写，必须通过 Uint8Array、Int32Array、Float64Array 等 TypedArray 来操作。它们共享同一段内存，改一个，另一个立刻反映变化。

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

从 Blob 获取 ArrayBuffer 必须异步，因为可能涉及磁盘 I/O：

const reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = () => {   const buffer = reader.result; // ArrayBuffer   const view = new Uint8Array(buffer); // 视图，可遍历字节   console.log(view[0], view.Length); // 如：71, 1024 };

• 避免重复调用 reader.readAsArrayBuffer()：同一个 FileReader 实例只能用一次，需新建
• 大文件（>500MB）可能触发内存压力，建议用 stream() + ReadableStream 分块读取（chrome 109+ 支持）
• buffer.byteLength 是总字节数；view.length 是元素个数（对 Uint8Array 二者相等，对 Uint32Array 则是 1/4）

Blob URL 不是真实路径，用完记得 revoke

URL.createObjectURL(blob) 返回一个形如 blob:https://example.com/xxx 的临时 URL，可用于 、、fetch() 或下载链接。但它会持续占用内存，直到显式释放。

典型错误是循环创建 Blob URL 却不清理，导致内存泄漏：

let currentUrl = null;  function showImage(file) {   if (currentUrl) URL.revokeObjectURL(currentUrl);   currentUrl = URL.createObjectURL(file);   img.src = currentUrl; }

• 页面卸载前应调用 URL.revokeObjectURL() 清理残留 URL
• 服务端返回的 Response.blob() 也可生成 URL，但注意 CORS 限制：跨域响应需带 access-Control-Allow-Origin
• Blob 构造函数支持拼接多个源：new Blob([arrayBuffer, string, blob], {type: 'image/png'})

下载二进制数据时，a.download + Blob 是最可靠组合

想让用户下载脚本生成的二进制内容（如加密后的 PDF、合成的 ZIP），不能靠 window.open() 或重定向——它们无法控制 MIME 类型和文件名。正确做法是创建 Blob，再用 触发下载：

function downloadBytes(data, filename, mimeType = 'application/octet-stream') {   const blob = new Blob([data], { type: mimeType });   const url = URL.createObjectURL(blob);   const a = document.createElement('a');   a.href = url;   a.download = filename;   document.body.appendChild(a);   a.click();   document.body.removeChild(a);   URL.revokeObjectURL(url); // 立即释放 }

• data 可以是 ArrayBuffer、TypedArray、String 或 Blob 数组
• 某些旧版 safari 不支持 a.download 下载 Blob URL，需降级为 iframe 导航（极少见）
• 服务器返回的 Content-Disposition: attachment 头仍比前端方案更稳定，优先走后端

真正难的不是语法，而是判断该用 Blob 还是 ArrayBuffer：要渲染/传输/下载就用 Blob；要逐字节解析、加密、解码、WebAssembly 交互就必须转成 ArrayBuffer + TypedArray。中间多一次 await blob.arrayBuffer() 调用，就多一次内存拷贝——这点在处理视频帧或音频 PCM 数据时，直接影响性能。