HTML5中二进制类型BinaryType设置为Blob或ArrayBuffer

作者：袖梨 2026-08-08

HTML5中二进制类型BinaryType设置为Blob或ArrayBuffer需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

BinaryType 并非 HTML5 标准全局属性，而是 XMLHttpRequest 的 responseType、Fetch 的响应方法及 WebSocket 的 binaryType 属性所涉及的二进制数据格式控制机制，分别对应 Blob 与 ArrayBuffer 两种类型。

在 HTML5 中，BinaryType 并不是标准的全局属性或配置项，它常见于 WebSocket 或某些浏览器私有 API（如旧版 Firefox 的 MozWebSocket）中，用于指定二进制数据的接收格式。但需注意：现代标准 WebSocket 接口本身并不提供 binaryType 属性的设置能力；真正支持该属性的是 XMLHttpRequest（XHR） 和 Fetch API 的 Response 对象，以及 WebRTC 的 DataChannel 等场景。下面按常用上下文分别说明：

XMLHttpRequest 中设置 binaryType

XMLHttpRequest 支持通过 responseType 控制响应体解析方式，其值可设为 "blob" 或 "arraybuffer"（注意大小写），对应二进制数据的两种封装形式：

  1. responseType = "blob"：响应以 Blob 对象返回，适合下载文件、读取图片、后续用 URL.createObjectURL() 渲染等场景。
  2. responseType = "arraybuffer"：响应以原始字节缓冲区 ArrayBuffer 返回，适合需要逐字节操作、解码协议（如 WebSocket 帧、自定义二进制格式）、配合 TypedArray 或 DataView 解析的场景。

示例：

const xhr = new XMLHttpRequest();xhr.open('GET', '/data.bin');xhr.responseType = 'arraybuffer'; // 或 'blob'xhr.onload = function() {  if (xhr.status === 200) {    const data = xhr.response; // ArrayBuffer 或 Blob    // 后续处理...  }};xhr.send();

Fetch API 中获取二进制数据

Fetch 不提供类似 binaryType 的设置项，而是通过调用响应对象的不同方法来获取不同类型的二进制数据：

  1. response.arrayBuffer() → 返回 Promise<ArrayBuffer>
  2. response.blob() → 返回 Promise<Blob>
  3. 也可用 response.text() 或 response.json()，但不适用于纯二进制流

示例：

fetch('/data.bin')  .then(res => res.arrayBuffer()) // 或 res.blob()  .then(buffer => {    // buffer 是 ArrayBuffer 实例    const view = new Uint8Array(buffer);    console.log(view[0]); // 第一个字节  });

WebSocket 中的二进制接收（注意兼容性）

标准 WebSocket 规范中，binaryType 是 WebSocket 实例的一个可写属性（仅部分浏览器支持，Chrome/Firefox/Edge 均已支持），用于指定 onmessage 事件中 event.data 的类型：

  1. ws.binaryType = 'blob' → event.data 是 Blob
  2. ws.binaryType = 'arraybuffer' → event.data 是 ArrayBuffer
  3. 默认值通常是 'blob'，但规范未强制，建议显式设置

示例：

const ws = new WebSocket('wss://example.com');ws.binaryType = 'arraybuffer'; // 关键设置ws.onmessage = function(event) {  if (event.data instanceof ArrayBuffer) {    const view = new DataView(event.data);    // 解析二进制帧...  }};

选择 Blob 还是 ArrayBuffer？关键看用途

二者本质都是二进制容器，但适用场景不同：

  1. Blob：不可直接读写，适合大文件、流式处理、与文件系统/URL API 交互（如上传、下载、播放视频）；内存占用低（底层可能延迟加载）。
  2. ArrayBuffer：可直接访问字节（配合 Uint8Array、DataView），适合解析协议、图像处理、加密计算等需要精细控制的场景；会立即分配并持有全部内存。
  3. 二者可相互转换：new Blob([arrayBuffer])，或用 FileReader.readAsArrayBuffer(blob) 反向转换。

不复杂但容易忽略：设置前确认浏览器支持，并在接收后及时释放资源（如不再需要时调用 URL.revokeObjectURL() 或避免长期持有大 ArrayBuffer）。

相关文章

精彩推荐