From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/blob/index.html | 150 ++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/zh-cn/web/api/blob/index.html (limited to 'files/zh-cn/web/api/blob/index.html') diff --git a/files/zh-cn/web/api/blob/index.html b/files/zh-cn/web/api/blob/index.html new file mode 100644 index 0000000000..8ad418dc2c --- /dev/null +++ b/files/zh-cn/web/api/blob/index.html @@ -0,0 +1,150 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Files + - Reference + - WebAPI + - 参考 + - 文件 +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

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

+ +

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

+ +

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

+ +

接受 Blob 对象的API也被列在 {{domxref("File", "File")}} 文档中。

+ +
注意：slice() 方法原本接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小，则返回从开始到结尾的所有数据。
+ +
注意：slice() 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。 没有浏览器引擎前缀的老版本 slice() 方法有不同的语义，并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。
+ +

构造函数

+ +
+
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
+
返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
+
+ +

属性

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
Blob 对象中所包含数据的大小（字节）。
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。
+
+ +

方法

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
+
{{domxref("Blob.stream()", "Blob.stream()")}}
+
返回一个能读取blob内容的 {{domxref("ReadableStream")}}。
+
{{domxref("Blob.text()", "Blob.text()")}}
+
返回一个promise且包含blob所有内容的UTF-8格式的 {{domxref("USVString")}}。
+
{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
+
返回一个promise且包含blob所有内容的二进制格式的 {{domxref("ArrayBuffer")}} 
+
+ +

示例

+ +

Blob 构造函数用法举例

+ +

{{domxref("Blob.Blob", "Blob() 构造函数")}}允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：

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

{{ domxref("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中读取内容的方法是使用 {{domxref("FileReader")}}。以下代码将 Blob 的内容作为类型数组读取：

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result 包含被转化为类型数组 typed array 的 blob
+});
+reader.readAsArrayBuffer(blob);
+ +

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

+ +
var text = await (new Response(blob)).text();
+
+ +

通过使用 {{domxref("FileReader")}} 的其它方法可以把 Blob 读取为字符串或者数据URL。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("api.Blob")}}

+ +

[1]WebKit 和 Opera 11.10 版本实现的 slice() 使用 length 来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，WebKit 已经将其移除，并添加了 Blob.webkitSlice() 来支持这个新的语法。

+ +

[2] Firefox 4 版本实现的 slice() 使用 length来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，Gecko 已经将其移除，并添加了 mozSlice() 来支持这个新的语法。

+ +

[3] 在Gecko 12.0 {{ geckoRelease("12.0") }} 之前，有个bug会影响 slice() 的行为，就是参数 start 和 end 的值不能超出64位有符号数字范围，现已修复。

+ +

[4] 请看 {{bug("1048325")}}。

+ +

Gecko 备注：特权许可

+ +

要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它:

+ +
Cu.importGlobalProperties(['Blob']);
+ +

Blob可以在 Worker 作用域内使用。

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf