File()

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

語法

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

參數(shù)

bits

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

name

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

options 可選

選項對象，包含文件的可選屬性?？捎玫倪x項如下：

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

示例

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

Blob()

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

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

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

語法

var aBlob = new Blob( array, options );

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

參數(shù)

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

屬性

Blob.size?只讀

Blob 對象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）。

Blob.type?只讀

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

方法

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

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

Blob.stream()

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

Blob.text()

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

Blob.arrayBuffer()

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

示例

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

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

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

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

const imgBlob = fetchedImgData(); // 通過接口返回的圖片資源，設(shè)置返回的responseType為blob
const blob = new Blob([imgBlob], {type: 'image/png' }); // 傳入一個合適的 MIME 類型
const url = URL.createObjectURL(blob);
// 會產(chǎn)生一個類似 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對象。下述代碼將Blob中的內(nèi)容讀取為文本：

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

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

總結(jié)

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