Blob

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

备注： 此特性在 Web Worker 中可用。

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

使用 blob

要从其他非 blob 对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象，请参阅 File 文档。

接受 Blob 对象的 API 也被列在 File 文档中。

构造函数

Blob()

返回一个新创建的 Blob 对象，其内容由参数中给定的数组拼接组成。

实例属性

Blob.size 只读

Blob 对象中所包含数据的大小（字节）。

Blob.type 只读

一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

实例方法

Blob.arrayBuffer()

返回一个 promise，其会兑现一个包含 Blob 所有内容的二进制格式的 ArrayBuffer。

Blob.bytes()

返回一个 promise，其会兑现一个包含 Blob 内容的 Uint8Array。

Blob.slice()

返回一个新的 Blob 对象，其中包含调用它的 blob 的指定字节范围内的数据。

Blob.stream()

返回一个能读取 Blob 内容的 ReadableStream。

Blob.text()

返回一个 promise，其会兑现一个包含 Blob 所有内容的 UTF-8 格式的字符串。

示例

创建一个 blob

Blob() 构造函数可以通过其他对象创建 blob。例如，用一个 JSON 字符串构造一个 blob：

js
const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

创建一个表示类型化数组内容的 URL

以下代码创建了一个 JavaScript 类型化数组，并创建一个新的包含类型化数组中的数据的 Blob。然后调用 URL.createObjectURL() 方法，将 blob 转换为一个 URL。

HTML

html
<p>
  此示例创建一个包含空格字符到字母 Z 的 ASCII
  代码的类型化数组，然后将其转换为对象 URL。将创建一个用于打开该对象 URL
  的链接。单击该链接可查看解码后的对象 URL。
</p>

JavaScript

该示例代码片段的主要片段是 typedArrayToURL() 函数，其用于从给定的类型化数组创建一个 Blob，并返回该 Blob 的对象 URL。将数据转换为对象 URL 后，可通过多种方式使用，包括作为 <img> 元素 src 属性的值（当然，假设给定的数据包含了一张图片）。

js
function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // 确保如果我们的文档在 frame 中，我们会让用户首先在新的标签页或窗口中打开它。否则，此示例将不起作用。
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "查看上面示例代码的渲染结果";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");

  const link = document.createElement("a");
  link.href = url;
  link.innerText = "打开这个数组的 URL";

  document.body.appendChild(link);
}

结果

从 blob 中提取数据

一种从 Blob 中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型化数组读取：

js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result 包含被转化为类型化数组的 blob 中的内容
});
reader.readAsArrayBuffer(blob);

另一种读取 Blob 中内容的方式是使用 Response 对象。下述代码将 Blob 中的内容读取为文本：

js
const text = await new Response(blob).text();

或者，也可以使用 Blob.text()：

js
const text = await blob.text();

通过使用 FileReader 的其他方法可以把 Blob 读取为字符串或者 data URL。

规范

Specification
File API
# blob-section

浏览器兼容性

BCD tables only load in the browser

参见