Blob
对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File
接口基于Blob
,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个 Blob
,请使用 Blob()
构造函数。要创建一个 blob 数据的子集 blob,请使用 slice()
方法。要获取用户文件系统上的文件对应的 Blob
对象,请参阅 File
文档。
接受 Blob
对象的API也被列在 File
文档中。
slice()
方法原本接受 length
作为第二个参数,以表示复制到新 Blob
对象的字节数。如果设置的参数使 start + length
超出了源 Blob
对象的大小,则返回从开始到结尾的所有数据。slice()
方法在某些浏览器和版本上带有浏览器引擎前缀:比如 Firefox 12 及更早版本的blob.mozSlice()
和 Safari 中的blob.webkitSlice()
。 没有浏览器引擎前缀的老版本 slice()
方法有不同的语义,并且已过时。Firefox 30 取消了对 blob.mozSlice()
的支持。构造函数
Blob(blobParts[, options])
- 返回一个新创建的
Blob
对象,其内容由参数中给定的数组串联组成。
属性
方法
Blob.slice([start[, end[, contentType]]])
- 返回一个新的
Blob
对象,包含了源Blob
对象中指定范围内的数据。 Blob.stream()
- 返回一个能读取blob内容的
ReadableStream
。 Blob.text()
- 返回一个promise且包含blob所有内容的UTF-8格式的
USVString
。 Blob.arrayBuffer()
- 返回一个promise且包含blob所有内容的二进制格式的
ArrayBuffer
示例
Blob 构造函数用法举例
Blob() 构造函数
允许通过其它对象创建 Blob 对象。比如,用字符串构建一个 blob:
var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
BlobBuilder
接口提供了另外一种创建Blob
对象的方式,但该方式现在已经废弃,不应继续使用:
var builder = new BlobBuilder(); var fileParts = ['<a id="a"><b id="b">hey!</b></a>']; builder.append(fileParts[0]); var myBlob = builder.getBlob('text/xml');
示例:使用 Blob 创建一个指向类型化数组的URL
参考下面的代码:
var typedArray = GetTheTypedArraySomehow(); var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型 var url = URL.createObjectURL(blob); // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用普通 URL 那样使用它,比如用在 img.src 上。
示例:从 Blob 中提取数据
从Blob中读取内容的唯一方法是使用 FileReader
。以下代码将 Blob 的内容作为类型数组读取:
var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result 包含被转化为类型数组 typed array 的 blob }); 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:
var text = await (new Response(blob)).text();
通过使用 FileReader
的其它方法可以把 Blob 读取为字符串或者数据URL。
规范
规范 | 状态 | 备注 |
---|---|---|
File API Blob |
Working Draft | Initial definition |
浏览器兼容性
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Blob | Chrome Full support 5 | Edge Full support Yes | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Blob() constructor | Chrome Full support 20 | Edge ? | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari Full support 8 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox Android
Full support
14
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
arrayBuffer() | Chrome Full support 76 | Edge No support No | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
size | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android Full support 18 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
slice() | Chrome
Full support
21
| Edge Full support 12 | Firefox
Full support
13
| IE Full support 10 | Opera Full support 12 | Safari
Full support
5.1
| WebView Android Full support Yes | Chrome Android
Full support
25
| Firefox Android Full support 14 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
stream() | Chrome Full support 76 | Edge No support No | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
text() | Chrome Full support 76 | Edge No support No | Firefox Full support 69 | IE No support No | Opera No support No | Safari No support No | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
type | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support 11 | Safari Full support 5.1 | WebView Android No support No | Chrome Android Full support 18 | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
[1]WebKit 和 Opera 11.10 版本实现的 slice()
使用 length
来作为第二个参数。但是,因为这语法异于 Array.slice()
和 String.slice()
,WebKit 已经将其移除,并添加了 Blob.webkitSlice()
来支持这个新的语法。
[2] Firefox 4 版本实现的 slice()
使用 length
来作为第二个参数。但是,因为这语法异于 Array.slice()
和 String.slice()
,Gecko 已经将其移除,并添加了 mozSlice()
来支持这个新的语法。
[3] 在Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) 之前,有个bug会影响 slice()
的行为,就是参数 start
和 end
的值不能超出64位有符号数字范围,现已修复。
[4] 请看 bug 1048325。
Gecko 备注:特权许可
要使用 chrome 代码,JSM 和 Bootstrap 作用域,你必须像这样导入它:
Cu.importGlobalProperties(['Blob']);
Blob
可以在 Worker 作用域内使用。