File()

File()?構(gòu)造器創(chuàng)建新的 File 對(duì)象實(shí)例。

語(yǔ)法

var myFile = new File(bits, name[, options]);

參數(shù)

bits

一個(gè)包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 對(duì)象的 Array — 或者任何這些對(duì)象的組合。這是 UTF-8 編碼的文件內(nèi)容。

name

USVString，表示文件名稱，或者文件路徑。

options 可選

選項(xiàng)對(duì)象，包含文件的可選屬性?？捎玫倪x項(xiàng)如下：

• type: DOMString，表示將要放到文件中的內(nèi)容的 MIME 類型。默認(rèn)值為 “” 。
• lastModified: 數(shù)值，表示文件最后修改時(shí)間的 Unix 時(shí)間戳（毫秒）。默認(rèn)值為?Date.now()。

示例

var file = new File(["my name"], "infoTxt", {
  type: "text/plain",
});

Blob()

Blob?對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。它的數(shù)據(jù)可以按文本或二進(jìn)制的格式進(jìn)行讀取，也可以轉(zhuǎn)換成 ReadableStream 來(lái)用于數(shù)據(jù)操作。

Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File?接口基于Blob，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件，同時(shí)?Blob?對(duì)象的API也被列在 File 接口中。

要從其他非blob對(duì)象和數(shù)據(jù)構(gòu)造一個(gè) Blob，請(qǐng)使用?Blob()?構(gòu)造函數(shù)。要?jiǎng)?chuàng)建一個(gè) blob 數(shù)據(jù)的子集 blob，請(qǐng)使用?slice()?方法。要獲取用戶文件系統(tǒng)上的文件對(duì)應(yīng)的?Blob?對(duì)象，請(qǐng)參閱 File 文檔。

語(yǔ)法

var aBlob = new Blob( array, options );

返回一個(gè)新創(chuàng)建的 Blob 對(duì)象，其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)組成。

參數(shù)

• array 是一個(gè)由ArrayBuffer,?ArrayBufferView,?Blob,?DOMString?等對(duì)象構(gòu)成的?Array?，或者其他類似對(duì)象的混合體，它將會(huì)被放進(jìn)?Blob。DOMStrings會(huì)被編碼為UTF-8。
• options 是一個(gè)可選的BlobPropertyBag字典，它可能會(huì)指定如下兩個(gè)屬性：
  • type，默認(rèn)值為 “”，它代表了將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類型。
  • endings，默認(rèn)值為"transparent"，用于指定包含行結(jié)束符\n的字符串如何被寫入。 它是以下兩個(gè)值中的一個(gè)： “native”，代表行結(jié)束符會(huì)被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符，或者 “transparent”，代表會(huì)保持blob中保存的結(jié)束符不變

屬性

Blob.size?只讀

Blob 對(duì)象中所包含數(shù)據(jù)的大小（字節(jié)）。

Blob.type?只讀

一個(gè)字符串，表明該 Blob 對(duì)象所包含數(shù)據(jù)的 MIME 類型。如果類型未知，則該值為空字符串。

方法

Blob.slice([start[, end[, contentType]]])

返回一個(gè)新的 Blob 對(duì)象，包含了源 Blob 對(duì)象中指定范圍內(nèi)的數(shù)據(jù)。

Blob.stream()

返回一個(gè)能讀取blob內(nèi)容的 ReadableStream。

Blob.text()

返回一個(gè)promise且包含blob所有內(nèi)容的UTF-8格式的 USVString。

Blob.arrayBuffer()

返回一個(gè)promise且包含blob所有內(nèi)容的二進(jìn)制格式的 ArrayBuffer

示例

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個(gè)包含DOMString的數(shù)組
const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
oMyBlob.size // 32
oMyBlob.type // 'text/html'

Blob()?構(gòu)造函數(shù)允許通過(guò)其它對(duì)象創(chuàng)建 Blob 對(duì)象。比如，用字符串構(gòu)建一個(gè) blob：

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

使用 Blob 創(chuàng)建一個(gè)指向類型化數(shù)組的URL

const imgBlob = fetchedImgData(); // 通過(guò)接口返回的圖片資源，設(shè)置返回的responseType為blob
const blob = new Blob([imgBlob], {type: 'image/png' }); // 傳入一個(gè)合適的 MIME 類型
const url = URL.createObjectURL(blob);
// 會(huì)產(chǎn)生一個(gè)類似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 這樣的URL字符串
// 你可以像使用普通 URL 那樣使用它，比如用在 img.src 上。

從 Blob 中提取數(shù)據(jù)

一種從Blob中讀取內(nèi)容的方法是使用 FileReader。以下代碼將 Blob 的內(nèi)容作為類型數(shù)組讀?。?/p>

const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.addEventListener("load ", function(readRes) {
   // readRes.target.result 轉(zhuǎn)化為arrayBuffer的 blob
});

另一種讀取Blob中內(nèi)容的方式是使用Response對(duì)象。下述代碼將Blob中的內(nèi)容讀取為文本：

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

通過(guò)使用 FileReader 的其它方法可以把 Blob 讀取為字符串或者數(shù)據(jù)URL。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評(píng)論