--- 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>