在此页

• 使用 Blob
• 构造函数
• Instance properties
• Instance methods
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

Blob 对象表示 Blob，它是不可变、原生数据的像文件对象；它们可以被读取作为文本或二进制数据，或被转换成 ReadableStream 因此其方法可以用于处理数据。

Blob 可以表示不必采用 JavaScript 本机格式的数据。 File 接口基于 Blob ，继承并扩展 Blob 功能以支持用户系统文件。

使用 Blob

为构建 Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File 文档编制。

API 接受 Blob objects are also listed in the File 文档编制。

构造函数

Blob()

返回新近创建的 Blob object which contains a concatenation of all of the data in the array passed into the constructor.

Instance properties

Blob.prototype.size 只读

The size, in bytes, of the data contained in the Blob 对象。

Blob.prototype.type 只读

A string indicating the MIME type of the data contained in the Blob . If the type is unknown, this string is empty.

Instance methods

Blob.prototype.arrayBuffer()

Returns a promise that resolves with an ArrayBuffer containing the entire contents of the Blob as binary data.

Blob.prototype.slice()

返回新的 Blob object containing the data in the specified range of bytes of the blob on which it's called.

Blob.prototype.stream()

返回 ReadableStream that can be used to read the contents of the Blob .

Blob.prototype.text()

Returns a promise that resolves with a USVString containing the entire contents of the Blob interpreted as UTF-8 text.

范例

创建 Blob

Blob() constructor can create blobs from other objects. For example, to construct a blob from a JSON string:

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

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

The following code creates a JavaScript typed array and creates a new Blob containing the typed array's data. It then calls URL.createObjectURL() to convert the blob into a URL .

HTML

<p>This example creates a typed array containing the ASCII codes
   for the space character through the letter Z, then converts it
   to an object URL. A link to open that object URL is created.
   Click the link to see the decoded object URL.</p>
					

JavaScript

The main piece of this code for example purposes is the typedArrayToURL() function, which creates a Blob from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the <img> 元素的 src attribute (assuming the data contains an image, of course).

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 = 'Open the array URL';
document.body.appendChild(link);
					

结果

Click the link in the example to see the browser decode the object URL.

从 Blob 提取数据

One way to read content from a Blob is to use a FileReader . The following code reads the content of a Blob as a typed array:

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);
					

Another way to read content from a Blob is to use a 响应 . The following code reads the content of a Blob as text:

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

Or by using Blob.prototype.text() :

const text = await blob.text();
					

By using other methods of FileReader , it is possible to read the contents of a Blob as a string or a data URL.

规范

规范	状态	注释
文件 API 定义为 ' Blob 接口' 在该规范中。	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Blob	Chrome 5	Edge 12	Firefox 4	IE 10	Opera 11	Safari 5.1	WebView Android ≤37	Chrome Android 18	Firefox Android 14	Opera Android 11	Safari iOS 6	Samsung Internet Android 1.0
Blob() 构造函数	Chrome 20	Edge 12	Firefox 13 13 Before Firefox 16, the second parameter, when set to null or undefined , leads to an error instead of being handled as an empty dictionary.	IE 10	Opera 12	Safari 8	WebView Android 37	Chrome Android 25	Firefox Android 14 14 Before Firefox 16, the second parameter, when set to null or undefined , leads to an error instead of being handled as an empty dictionary.	Opera Android 12	Safari iOS 8	Samsung Internet Android 1.5
arrayBuffer()	Chrome 76	Edge 79	Firefox 69	IE No	Opera No	Safari No	WebView Android 76	Chrome Android 76	Firefox Android No	Opera Android 54	Safari iOS No	Samsung Internet Android 12.0
size	Chrome 5	Edge 12	Firefox 4	IE 10	Opera 11	Safari 5.1	WebView Android No	Chrome Android 18	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 1.0
slice()	Chrome 21 21 不支持 5 — 25 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 12	Firefox 13 13 Prior to Firefox 12, there was a bug that affected the behavior of Blob.slice() ; it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values. 不支持 5 — 13 Prefixed Prefixed Implemented with the vendor prefix: moz	IE 10	Opera 12	Safari 5.1 Prefixed 5.1 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android Yes	Chrome Android 25 25 不支持 18 — 25 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 14	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 1.5 1.5 不支持 1.0 — 1.5 Prefixed Prefixed Implemented with the vendor prefix: webkit
stream()	Chrome 76	Edge 79	Firefox 69	IE No	Opera No	Safari No	WebView Android 76	Chrome Android 76	Firefox Android No	Opera Android 54	Safari iOS No	Samsung Internet Android 12.0
text()	Chrome 76	Edge 79	Firefox 69	IE No	Opera No	Safari No	WebView Android 76	Chrome Android 76	Firefox Android No	Opera Android 54	Safari iOS No	Samsung Internet Android 12.0
type	Chrome 5	Edge 12	Firefox 4	IE 10	Opera 11	Safari 5.1	WebView Android No	Chrome Android 18	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android 1.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• BlobBuilder
• FileReader
• File
• URL.createObjectURL
• 使用来自 Web 应用程序的文件

元数据

• 最后修改： Jul 12, 2020

相关话题

1. Blob
2. 构造函数

   1. Blob()
3. 特性

   1. size
   2. type
4. 方法

   1. arrayBuffer()
   2. slice()
   3. stream()
   4. text()
5. 文件 API 相关页面

   1. File
   2. FileList
   3. FileReader
   4. FileReaderSync