Blob對象

Blob對象

1. 什麼是Blob對象

Blob代表了一中不變的、原數據的類文件對象，它們可以當作text或者binary data或者轉換爲可讀取的流(ReadableStream)。所以它的方法可以被用來處理數據。Blobs表示的不一定是JavaScript原生格式的數據。File接口基於Blob，繼承了blob的功能並且拓展了它以支持使用用戶系統上的文件。

2. 使用blobs

爲了從非blob對象和數據構建一個Blob，可以使用Blob()構造函數。爲了創建一個包含另一個blob‘s數據的子集的blob對象，可以使用slice()方法。爲了獲取一個在用戶系統上的文件的Blob對象，可以看File文檔。

3. 構造器

Blob(blobParts[, option])

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

4. 屬性

• Blob.size 只讀

  Blob對象包含的數據大小，單位是字節(bytes)。

• Blob.type 只讀

  Blob包含數據的MIME類型。如果類型是未知的，它的值爲空。

5. 方法

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

  返回一個新的Blob對象，包含了源Blob對象中指定範圍的數據

• Blob.stream()

  返回一個可以讀取blob內容的流。

• Blob.text()

  返回一個promise，返回一個包含了blob完整內容，並格式爲UTF-8格式顯示的USVString

• Blob.arrayBuffer()

  返回一個promise，返回一個包含了blob整個內容，並且格式爲binary data的ArrayBuffer對象

6. 實例

創建一個blob對像

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

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

下面的代碼創建了一個JavaScript類型化數組並且創建一個新的Blob對象包含了類型化數組的數據，並且調用createObjectURL()函數將blob轉換成URL。

    let typedArrayToURL = (typedArray, mimeType) => {
        return URL.createObjectURL(new Blob([typedArray.buffer]), {type: mimeType})
    };

    let bytes = new Uint8Array(59);

    for ( let i = 0; i < 59; i++ ) {
        bytes[i] = 32 + i;
    }

    let url = typedArrayToURL(bytes, "text/plain");
    let link = document.createElement("a");
    link.href = url;
    link.innerText = "Open the array URL";
    document.body.appendChild(link);

從Blob對象抽取數據

FileReader是一種從Blob中讀取數據的方式。

    var reader = new FileReader();
    reader.onload = function (e) {
        var result = reader.result;
    }

    reader.readAsArrayBuffer(blob);

另一種從Blob中讀取內容的方式是使用一個響應。下面代碼讀取Blob內容爲text

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

當然還可以使用FileReader的readAsText()來讀取字符串，或者ReadAsDataURL()來讀取data URL。

遺棄: 通過`BlobBuilder`創建blobs。

在有Blob()構造器之前，使用BlobBuilder API來創建Blob,但是現在已經被拋棄了，並且不會在使用。

    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');