Javascript File和Blob詳解

Posted on by

File()

File() 構造器創建新的 File 對象實例。

語法

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

參數

bits

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

name

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

options 可選

選項對象，包含文件的可選屬性。可用的選項如下：

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

示例

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

Blob()

Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用於數據操作。

Blob 表示的不一定是JavaScript原生格式的數據。File 接口基於Blob，繼承瞭 blob 的功能並將其擴展使其支持用戶系統上的文件，同時 Blob 對象的API也被列在 File 接口中。

要從其他非blob對象和數據構造一個 Blob，請使用 Blob() 構造函數。要創建一個 blob 數據的子集 blob，請使用 slice() 方法。要獲取用戶文件系統上的文件對應的 Blob 對象，請參閱 File 文檔。

語法

var aBlob = new Blob( array, options );

返回一個新創建的 Blob 對象，其內容由參數中給定的數組串聯組成。

參數

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

屬性

Blob.size 隻讀

Blob 對象中所包含數據的大小（字節）。

Blob.type 隻讀

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

方法

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

返回一個新的 Blob 對象，包含瞭源 Blob 對象中指定范圍內的數據。

Blob.stream()

返回一個能讀取blob內容的 ReadableStream。

Blob.text()

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

Blob.arrayBuffer()

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

示例

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

Blob() 構造函數允許通過其它對象創建 Blob 對象。比如，用字符串構建一個 blob：

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

使用 Blob 創建一個指向類型化數組的URL

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

從 Blob 中提取數據

一種從Blob中讀取內容的方法是使用 FileReader。以下代碼將 Blob 的內容作為類型數組讀取：

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

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

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

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：