在一般的Web開發中，很少會用到Blob，但Blob可以滿足一些場景下的特殊需求。Blob，Binary Large Object的縮寫，代表二進制類型的大對象。Blob的概念在一些數據庫中有使用到，例如，MYSQL中的BLOB類型就表示二進制數據的容器。在Web中，Blob類型的對象表示不可變的類似文件對象的原始數據，通俗點說，就是Blob對象是二進制數據，但它是類似文件對象的二進制數據，因此可以像操作File對象一樣操作Blob對象，實際上，File繼承自Blob。
Blob基本用法
創建
可以通過Blob的構造函數創建Blob對象：
Blob(blobParts[, options])
參數說明：
blobParts：數組類型，數組中的每一項連接起來構成Blob對象的數據，數組中的每項元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString 。
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對象中指定范圍內的數據。
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，賦值給<img>標簽：
<!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中選擇的圖片會在<img>里顯示出來，如圖所示：
同時，可以在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獲取源數據的。
- 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本大前端精選書籍！
