Blob

Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.

Blobs can represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob , inheriting blob functionality and expanding it to support files on the user's system.

Using blobs

To construct a 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 文档编制。

The APIs accepting Blob objects are also listed in the File 文档编制。

构造函数

Blob()
Returns a newly created 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.

范例

Creating a 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'});
					

Creating a URL representing the contents of a typed array

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> element's 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.

Extracting data from a 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 Response . 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.

规范

规范 状态 Comment
File API
The definition of 'The Blob interface' in that specification.
工作草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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

图例

完整支持
完整支持
不支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅