1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: Blob
slug: Web/API/Blob
tags:
- API
- Files
- Reference
- WebAPI
- 参考
- 文件
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p><code>Blob</code><strong> </strong>对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 {{DOMxRef("ReadableStream")}} 来用于数据操作。 </p>
<p>Blob 表示的不一定是JavaScript原生格式的数据。{{domxref("File")}} 接口基于<code>Blob</code>，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。</p>
<p>要从其他非blob对象和数据构造一个 <code>Blob</code>，请使用 {{domxref("Blob.Blob", "Blob()")}} 构造函数。要创建一个 blob 数据的子集 blob，请使用 {{domxref("Blob.slice()", "slice()")}} 方法。要获取用户文件系统上的文件对应的 <code>Blob</code> 对象，请参阅 {{domxref("File", "File")}} 文档。</p>
<p>接受 <code>Blob</code> 对象的API也被列在 {{domxref("File", "File")}} 文档中。</p>
<div class="note"><strong>注意：</strong><code>slice()</code> 方法原本接受 <code>length</code> 作为第二个参数，以表示复制到新 <code>Blob</code> 对象的字节数。如果设置的参数使 <code>start + length</code> 超出了源 <code>Blob</code> 对象的大小，则返回从开始到结尾的所有数据。</div>
<div class="note"><strong>注意：</strong><code>slice()</code> 方法在某些浏览器和版本上带有浏览器引擎前缀：比如 Firefox 12 及更早版本的<code>blob.mozSlice()</code> 和 Safari 中的<code>blob.webkitSlice()</code>。 没有浏览器引擎前缀的老版本 <code>slice()</code> 方法有不同的语义，并且已过时。Firefox 30 取消了对 <code>blob.mozSlice()</code> 的支持。</div>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
<dd>返回一个新创建的 <code>Blob</code> 对象，其内容由参数中给定的数组串联组成。</dd>
</dl>
<h2 id="属性">属性</h2>
<dl>
<dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
<dd><code>Blob</code> 对象中所包含数据的大小（字节）。</dd>
<dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
<dd>一个字符串，表明该 <code>Blob</code> 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
<dd>返回一个新的 <code>Blob</code> 对象，包含了源 <code>Blob</code> 对象中指定范围内的数据。</dd>
<dt>{{domxref("Blob.stream()", "Blob.stream()")}}</dt>
<dd>返回一个能读取blob内容的 {{domxref("ReadableStream")}}。</dd>
<dt>{{domxref("Blob.text()", "Blob.text()")}}</dt>
<dd>返回一个promise且包含blob所有内容的UTF-8格式的 {{domxref("USVString")}}。</dd>
<dt>{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}</dt>
<dd>返回一个promise且包含blob所有内容的二进制格式的 {{domxref("ArrayBuffer")}} </dd>
</dl>
<h2 id="示例">示例</h2>
<h3 id="Blob_构造函数用法举例">Blob 构造函数用法举例</h3>
<p>{{domxref("Blob.Blob", "Blob() 构造函数")}}允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：</p>
<pre class="brush: js notranslate">var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
<div class="warning">
<p>{{ domxref("BlobBuilder") }} 接口提供了另外一种创建<code>Blob</code> 对象的方式，但该方式现在已经废弃，不应继续使用：</p>
<pre class="brush: js notranslate">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');
</pre>
</div>
<h3 id="示例：使用_Blob_创建一个指向类型化数组的URL">示例：使用 Blob 创建一个指向类型化数组的URL</h3>
<p>参考下面的代码：</p>
<pre class="brush: js notranslate">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 上。
</pre>
<h3 id="示例：从_Blob_中提取数据">示例：从 Blob 中提取数据</h3>
<p>一种从Blob中读取内容的方法是使用 {{domxref("FileReader")}}。以下代码将 Blob 的内容作为类型数组读取：</p>
<pre class="brush: js notranslate">var reader = new FileReader();
reader.addEventListener("loadend", function() {
// reader.result 包含被转化为类型数组 typed array 的 blob
});
reader.readAsArrayBuffer(blob);</pre>
<p>另一种读取Blob中内容的方式是使用Response对象。下述代码将Blob中的内容读取为文本：</p>
<pre class="brush: js notranslate">var text = await (new Response(blob)).text();
</pre>
<p>通过使用 {{domxref("FileReader")}} 的其它方法可以把 Blob 读取为字符串或者数据URL。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('File API','#blob','Blob')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.Blob")}}</p>
<p>[1]<a href="http://trac.webkit.org/changeset/55670">WebKit</a> 和 <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a> 版本实现的 <code>slice()</code> 使用 <code>length</code> 来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，WebKit 已经将其移除，并添加了 <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a> 来支持这个新的语法。</p>
<p>[2] <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a> 版本实现的 <code>slice()</code> 使用 <code>length</code>来作为第二个参数。但是，因为这语法异于 {{jsxref("Array/slice", "Array.slice()")}} 和 {{jsxref("String/slice", "String.slice()")}}，Gecko 已经将其移除，并添加了 <code>mozSlice()</code> 来支持这个新的语法。</p>
<p>[3] 在Gecko 12.0 {{ geckoRelease("12.0") }} 之前，有个bug会影响 <code>slice()</code> 的行为，就是参数 <code>start</code> 和 <code>end</code> 的值不能超出64位有符号数字范围，现已修复。</p>
<p>[4] 请看 {{bug("1048325")}}。</p>
<h2 id="Gecko_备注：特权许可">Gecko 备注：特权许可</h2>
<p>要使用 chrome 代码，JSM 和 Bootstrap 作用域，你必须像这样导入它:</p>
<pre class="brush: js notranslate">Cu.importGlobalProperties(['Blob']);</pre>
<p><code>Blob</code><font face="Consolas, Liberation Mono, Courier, monospace">可以在</font> Worker 作用域内使用。</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{domxref("BlobBuilder")}}</li>
<li>{{domxref("FileReader")}}</li>
<li>{{domxref("File")}}</li>
<li>{{domxref("URL.createObjectURL")}}</li>
<li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
</ul>
|
