細說Web API中的Blob

時間 2019-11-08

標籤細說 web api blob 欄目 HTML 简体版

原文原文鏈接

在通常的Web開發中，不多會用到Blob，但Blob能夠知足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，表明二進制類型的大對象。Blob的概念在一些數據庫中有使用到，例如，MYSQL中的BLOB類型就表示二進制數據的容器。在Web中，Blob類型的對象表示不可變的相似文件對象的原始數據，通俗點說，就是Blob對象是二進制數據，但它是相似文件對象的二進制數據，所以能夠像操做File對象同樣操做Blob對象，實際上，File繼承自Blob。html

Blob基本用法

建立

能夠經過Blob的構造函數建立Blob對象：前端

Blob(blobParts[, options])
複製代碼

參數說明：數據庫

blobParts：數組類型，數組中的每一項鍊接起來構成Blob對象的數據，數組中的每項元素能夠是ArrayBuffer, ArrayBufferView, Blob, DOMString 。json

options：可選項，字典格式類型，能夠指定以下兩個屬性：數組

type，默認值爲 ""，它表明了將會被放入到blob中的數組內容的MIME類型。
endings，默認值爲"transparent"，用於指定包含行結束符\n的字符串如何被寫入。它是如下兩個值中的一個： "native"，表示行結束符會被更改成適合宿主操做系統文件系統的換行符； "transparent"，表示會保持blob中保存的結束符不變。

例如：瀏覽器

var data1 = "a";
    var data2 = "b";
    var data3 = "<div style='color:red;'>This is a blob</div>";
    var data4 = { "name": "abc" };

    var blob1 = new Blob([data1]);
    var blob2 = new Blob([data1, data2]);
    var blob3 = new Blob([data3]);
    var blob4 = new Blob([JSON.stringify(data4)]);
    var blob5 = new Blob([data4]);
    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //輸出：Blob {size: 1, type: ""}
    console.log(blob2);  //輸出：Blob {size: 2, type: ""}
    console.log(blob3);  //輸出：Blob {size: 44, type: ""}
    console.log(blob4);  //輸出：Blob {size: 14, type: ""}
    console.log(blob5);  //輸出：Blob {size: 15, type: ""}
    console.log(blob6);  //輸出：Blob {size: 59, type: ""}
複製代碼

size表明Blob 對象中所包含數據的字節數。這裏要注意，使用字符串和普通對象建立Blob時的不一樣，blob4使用經過JSON.stringify把data4對象轉換成json字符串，blob5則直接使用data4建立，兩個對象的size分別爲14和15。blob4的size等於14很容易理解，由於JSON.stringify(data4)的結果爲："{"name":"abc"}"，正好14個字節(不包含最外層的引號)。blob5的size等於15是如何計算而來的呢？實際上，當使用普通對象建立Blob對象時，至關於調用了普通對象的toString()方法獲得字符串數據，而後再建立Blob對象。因此，blob5保存的數據是"[object Object]"，是15個字節(不包含最外層的引號)。性能優化

slice方法

Blob對象有一個slice方法，返回一個新的 Blob對象，包含了源 Blob對象中指定範圍內的數據。bash

slice([start[, end[, contentType]]])
複製代碼

參數說明：服務器

start：可選，表明 Blob 裏的下標，表示第一個會被會被拷貝進新的 Blob 的字節的起始位置。若是傳入的是一個負數，那麼這個偏移量將會從數據的末尾從後到前開始計算。網絡

end：可選，表明的是 Blob 的一個下標，這個下標-1的對應的字節將會是被拷貝進新的Blob 的最後一個字節。若是你傳入了一個負數，那麼這個偏移量將會從數據的末尾從後到前開始計算。

contentType：可選，給新的 Blob 賦予一個新的文檔類型。這將會把它的 type 屬性設爲被傳入的值。它的默認值是一個空的字符串。

例如：

var data = "abcdef";
    var blob1 = new Blob([data]);
    var blob2 = blob1.slice(0,3);
    
    console.log(blob1);  //輸出：Blob {size: 6, type: ""}
    console.log(blob2);  //輸出：Blob {size: 3, type: ""}
複製代碼

經過slice方法，從blob1中建立出一個新的blob對象，size等於3。

Blob使用場景

分片上傳

前面已經說過，File繼承自Blob，所以咱們能夠調用slice方法對大文件進行分片長傳。代碼以下：

function uploadFile(file) {
  var chunkSize = 1024 * 1024;   // 每片1M大小
  var totalSize = file.size;
  var chunkQuantity = Math.ceil(totalSize/chunkSize);  //分片總數
  var offset = 0;  // 偏移量
  
  var reader = new FileReader();
  reader.onload = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST","http://xxxx/upload?fileName="+file.name);
    xhr.overrideMimeType("application/octet-stream");
    
    xhr.onreadystatechange = function() {
      if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        ++offset;
        if(offset === chunkQuantity) {
          alert("上傳完成");
        } else if(offset === chunkQuantity-1){
          blob = file.slice(offset*chunkSize, totalSize);   // 上傳最後一片
          reader.readAsBinaryString(blob);
        } else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunkSize); 
          reader.readAsBinaryString(blob);
        }
      }else {
        alert("上傳出錯");
      }
    }
    
    if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result);   // e.target.result是這次讀取的分片二進制數據
    } else {
      xhr.send(e.target.result);
    }
  }
   var blob = file.slice(0, chunkSize);
   reader.readAsBinaryString(blob);
}
複製代碼

這段代碼還能夠進一步豐富，好比顯示當前的上傳進度，使用多個XMLHttpRequest對象並行上傳對象（須要傳遞分片數據的位置參數給服務器端）等。

Blob URL

Blob URL是blob協議的URL，它的格式以下：

blob:http://XXX
複製代碼

Blob URL能夠經過URL.createObjectURL(blob)建立。在絕大部分場景下，咱們能夠像使用Http協議的URL同樣，使用Blob URL。常見的場景有：做爲文件的下載地址和做爲圖片資源地址。

文件下載地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function createDownloadFile() {
            var content = "Blob Data";
            var blob = new Blob([content]);
            var link = document.getElementsByTagName("a")[0];
            link.download = "file";
            link.href = URL.createObjectURL(blob);
        }
        window.onload = createDownloadFile;
    </script>
</head>

<body>
    <a>下載</a>
</body>

</html>
複製代碼

點擊下載按鈕，瀏覽器將會下載一個名爲file的文件，文件的內容是：Blob Data。經過Blob對象，咱們在前端代碼中就能夠動態生成文件，提供給瀏覽器下載。打開Chrome瀏覽器調試窗口，在Elements標籤下能夠看到生成的Blob URL爲：

圖片資源地址

爲圖片文件建立一個Blob URL，賦值給標籤：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function handleFile(e) {
            var file = e.files[0];
            var blob = URL.createObjectURL(file);
            var img = document.getElementsByTagName("img")[0];
            img.src = blob;
            img.onload = function(e) {
                URL.revokeObjectURL(this.src);  // 釋放createObjectURL建立的對象##
            }
        }
    </script>
</head>

<body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br/>
    <img style="width:200px;height:200px">
</body>

</html>
複製代碼

input中選擇的圖片會在裏顯示出來，如圖所示：

同時，能夠在Network標籤欄，發現這個Blob URL的請求信息：

這個請求信息和平時咱們使用的Http URL獲取圖片幾乎徹底同樣。咱們還可使用Data URL加載圖片資源：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function handleFile(e) {
            var file = e.files[0];
            var fileReader = new FileReader();
            var img = document.getElementsByTagName("img")[0];
            fileReader.onload = function(e) {
                img.src = e.target.result;
            }
            fileReader.readAsDataURL(file);
        }
    </script>
</head>

<body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br/>
    <img style="width:200px;height:200px">
</body>

</html>
複製代碼

FileReader的readAsDataURL生成一個Data URL，如圖所示：

Data URL對你們來講應該並不陌生，Web性能優化中有一項措施：把小圖片用base64編碼直接嵌入到HTML文件中，實際上就是利用了Data URL來獲取嵌入的圖片數據。

那麼Blob URL和Data URL有什麼區別呢？

Blob URL的長度通常比較短，但Data URL由於直接存儲圖片base64編碼後的數據，每每很長，如上圖所示，瀏覽器在顯示Data URL時使用了省略號（…）。當顯式大圖片時，使用Blob URL能獲取更好的可能性。
Blob URL能夠方便的使用XMLHttpRequest獲取源數據，例如：

var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// 若是設置x.responseType = 'blob'，將返回一個Blob對象，而不是文本:
// x.responseType = 'blob';
x.onload = function() {
    alert(x.responseText);   // 輸出 Test
};
x.open('get', blobUrl);
x.send();
複製代碼

對於Data URL，並非全部瀏覽器都支持經過XMLHttpRequest獲取源數據的。 3. Blob URL 只能在當前應用內部使用，把Blob URL複製到瀏覽器的地址欄中，是沒法獲取數據的。Data URL相比之下，就有很好的移植性，你能夠在任意瀏覽器中使用。

除了能夠用做圖片資源的網絡地址，Blob URL也能夠用做其餘資源的網絡地址，例如html文件、json文件等，爲了保證瀏覽器能正確的解析Blob URL返回的文件類型，須要在建立Blob對象時指定相應的type：

// 建立HTML文件的Blob URL
var data = "<div style='color:red;'>This is a blob</div>";
var blob = new Blob([data], { type: 'text/html' });
var blobURL = URL.createObjectURL(blob);

// 建立JSON文件的Blob URL
var data = { "name": "abc" };
var blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
var blobURL = URL.createObjectURL(blob);

複製代碼

歡迎關注個人公衆號：老幹部的大前端，領取21本大前端精選書籍！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。