JavaScript中的二進制對象

JavaScript中用於表示二進制對象有，Blob對象、和 ArrayBuffer 對象。其中 Blob 對象表示一個不可變、原始數據的類文件對象。可以理解爲磁盤上儲存的原始文件對象，它可以是儲存的二進制文件格式，也有可能經過編碼的文本格式對象。ArrayBuffer 表示通用的、固定長度的原始二進制數據緩衝區，是一個字節數組。

1、Blob對象的類型

Blob 表示的不一定是JavaScript原生格式的數據，其中 File 就接口基於Blob，繼承了 blob 的功能。File 對象可以是<input> 元素上選擇文件後返回的 FileList 對象,也可以是來自由拖放操作生成的 DataTransfer 對象，或者來自 HTMLCanvasElement 上的 mozGetAsFile() API。File 對象是特殊類型的 Blob。

2、創建 Blob 對象

Blob() 構造函數返回一個新的 Blob 對象。

var blob = new Blob( array, options );

array 參數是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 對象，DOMStrings會被編碼爲UTF-8。

options 對象中type屬性表示MIME類型，endings用於指定包含行結束符\n的字符串如何被寫入。默認值爲"transparent"。

從 ArrayBufferView 創建Blob對象

let ab = new ArrayBuffer(32);
let int8 = new Int8Array(ab);
let blob = new Blob(int8, {type: 'application/octet-stream'}); //Blob { size: 32, type: "application/octet-stream" }

從 DOMString 創建 Blob對象

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

從已有的 Blob對象中創建

var blob = instanceOfBlob.slice([start [, end [, contentType]]]};

3、從 Blob 對象中提取數據

使用 FileReader API，還是使用上述示例：

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

使用 Response 對象：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
let res = new Response(blob).text().then(res => console.log(res)); //"{"hello": "world" }"注意 text() 方法返回的是promise對象。

直接使用Blob對象的方法

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

VM2171:1 {
"hello": "world"
}

4、URL.createObjectURL()

創建一個 DOMString，表示指定的File對象或Blob對象。

5、總結

Blob 對象的創建可以使用 Blob 構造函數從已有的ArrayBuffer, ArrayBufferView, Blob, DOMString 對象創建。不過最常見是從<input> 元素上選擇文件後返回的 FileList 對象。

Blob 對象提供了轉換爲其他對象的方法：（因爲不知道用戶打開的文件具體類型，能否正確顯示取決於調用對應的方法與具體Blob類型相對應）

Blob.stream()返回一個能讀取blob內容的 ReadableStream；

Blob.text()返回一個promise且包含blob所有內容的UTF-8格式的 USVString；

Blob.arrayBuffer()返回一個promise且包含blob所有內容的二進制格式的 ArrayBuffer；

FileReader 對象使用 File 或 Blob 對象指定要讀取的文件或數據，同樣提供了多種轉換類型的方法，

FileReader.readAsArrayBuffer() 讀取指定的 Blob中的內容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.

FileReader.readAsBinaryString() 開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。

FileReader.readAsDataURL()開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個data: URL格式的Base64字符串以表示所讀取文件的內容。

FileReader.readAsText()開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。

Response 對象同樣提供了多種讀取數據的方法。

Response.text() 返回文本內容；

Response.arrayBuffer() 返回ArrayBuffer 數據對象；

 

參考鏈接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

https://developer.mozilla.org/zh-CN/docs/Web/API/File

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader