js中關于Blob對象的介紹與使用
blob對象介紹
一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式 blob對象本質上是js中的一個對象，里面可以儲存大量的二進制編碼格式的數據。
創建blob對象
創建blob對象本質上和創建一個其他對象的方式是一樣的，都是使用Blob() 的構造函數來進行創建。 構造函數接受兩個參數：
第一個參數為一個數據序列，可以是任意格式的值。
第二個參數是一個包含兩個屬性的對象{ type: MIME的類型, endings: 決定第一個參數的數據格式，可以取值為 "transparent" 或者 "native"（transparent的話不變，是默認值，native 的話按操作系統轉換） 。 }
Blob()構造函數允許使用其他對象創建一個Blob對象，比如用字符串構建一個blob
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'}); 既然是對象，那么blob也擁有自己的屬性以及方法
屬性
-
Blob.isClosed (只讀)
布爾值，指示 Blob.close() 是否在該對象上調用過。 關閉的 blob 對象不可讀。
-
Blob.size (只讀)
Blob 對象中所包含數據的大小（字節）。
-
Blob.type (只讀)
一個字符串，表明該Blob對象所包含數據的MIME類型。如果類型未知，則該值為空字符串。
方法
-
Blob.close()
關閉 Blob 對象，以便能釋放底層資源。
-
Blob.slice([start[, end[, contentType]]])
返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內的數據。其實就是對這個blob中的數據進行切割，我們在對文件進行分片上傳的時候需要使用到這個方法。
看到上面這些方法和屬性，使用過HTML5提供的File接口的應該都很熟悉，這些屬性和方法在File接口中也都有。 其實File接口就是基于Blob，繼承blob功能并將其擴展為支持用戶系統上的文件，也就是說：
File接口中的Flie對象就是繼承與Blob對象。
blob對象的使用
上面說了很多關于Blob對象的一些概念性的東西，下面我們來看看實際用途。
分片上傳
首先說說分片上傳，我們在進行文件上傳的時候，因為服務器的限制，會限制每一次上傳到服務器的文件大小不會很大，這個時候我們就需要把一個需要上傳的文件進行切割，然后分別進行上傳到服務器。
假如需要做到這一步，我們需要解決兩個問題:
- 怎么切割?
- 怎么得知當前傳輸的進度?
首先怎么切割的問題上面已經有過說明，因為File文件對象是繼承與Blob對象的，因此File文件對象也擁有slice這個方法，我們可以使用這個方法將任何一個File文件進行切割。
代碼如下：
var BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .
var blob = document.getElementById("file").files[0];
var slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
var blobs = [];
slices.forEach(function(item, index) {blobs.push(blob.slice(index,index + 1));
}); 通過上面的方法。我們就得到了一個切割之后的File對象組成的數組blobs；
接下來要做的時候就是講這些文件分別上傳到服務器。
在HTTP1.1以上的協議中，有Transfer-Encoding這個編碼協議，用以和服務器通信，來得知當前分片傳遞的文件進程。
這樣解決了這兩個問題，我們不僅可以對文件進行分片上傳，并且能夠得到文件上傳的進度。
粘貼圖片
blob還有一個應用場景，就是獲取剪切板上的數據來進行粘貼的操作。例如通過QQ截圖后，需要在網頁上進行粘貼操作。
粘貼圖片我們需要解決下面幾個問題
-
監聽用戶的粘貼操作
-
獲取到剪切板上的數據
-
將獲取到的數據渲染到網頁中
首先我們可以通過paste事件來監聽用戶的粘貼操作:
document.addEventListener('paste', function (e) {console.info(e);
}); 然后通過事件對象中的clipboardData?對象來獲取圖片的文件數據。
clipboardData對象介紹
介紹一下 clipboardData 對象，它實際上是一個 DataTransfer 類型的對象， DataTransfer 是拖動產生的一個對象，但實際上粘貼事件也是它。
clipboardData 的屬性介紹
| 屬性 | 類型 | 說明 |
|---|---|---|
| dropEffect | String | 默認是 none |
| effectAllowed | String | 默認是 uninitialized |
| files | FileList | 粘貼操作為空List |
| items | DataTransferItemList | 剪切板中的各項數據 |
| types | Array | 剪切板中的數據類型 該屬性在Safari下比較混亂 |
items 介紹
items 是一個 DataTransferItemList 對象，自然里面都是 DataTransferItem 類型的數據了。
屬性
items 的 DataTransferItem 有兩個屬性 kind 和 type
| 屬性 | 說明 |
|---|---|
| kind | 一般為 string 或者 file |
| type | 具體的數據類型，例如具體是哪種類型字符串或者哪種類型的文件，即 MIME-Type |
方法
| 方法 | 參數 | 說明 |
|---|---|---|
| getAsFile | 空 | 如果 kind 是 file ，可以用該方法獲取到文件 |
| getAsString | function(str) | 如果 kind 是 string ，可以用該方法獲取到字符串str |
在原型上還有一些其他方法，不過在處理剪切板操作的時候一般用不到了。
type 介紹
一般 types 中常見的值有 text/plain 、 text/html 、 Files 。
| 值 | 說明 |
|---|---|
| text/plain | 普通字符串 |
| text/html | 帶有樣式的html |
| Files | 文件(例如剪切板中的數據) |
有了上面這些方法，我們可以解決第二個問題即獲取到剪切板上的數據。
document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);}}
}); 最后我們需要將獲取到的數據渲染到網頁上。
其實這個本質上就是一個類似于上傳圖片本地瀏覽的問題。我們可以直接通過HTML5的File接口將獲取到的文件上傳到服務器然后通過講服務器返回的url地址來對圖片進行渲染。也可以使用fileRender對象來進行圖片本地瀏覽。
fileRender對象簡介
從Blob中讀取內容的唯一方法是使用 FileReader。
FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在result屬性中。
| 方法名 | 參數 | 描述 |
|---|---|---|
| readAsBinaryString | file | 將文件讀取為二進制編碼 |
| readAsText | file,[encoding] | 將文件讀取為文本 |
| readAsDataURL | file | 將文件讀取為DataURL |
| abort | (none) | 終端讀取操作 |
FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態。
| 事件 | 描述 |
|---|---|
| onabort | 中斷 |
| onerror | 出錯 |
| onloadstart | 開始 |
| onprogress | 正在讀取 |
| onload | 成功讀取 |
| onloadend | 讀取完成，無論成功失敗 |
通過上面的方法以及事件，我們可以發現，通過readAsDataURL方法及onload事件就可以拿到一個可本地瀏覽圖片的DataURL。
最終代碼如下：
document.addEventListener('paste', function (e) {console.info(e);var cbd = e.clipboardData;var fr = new FileReader();var html = '';for(var i = 0; i < cbd.items.length; i++) {var item = cbd.items[i];console.info(item);if(item.kind == "file"){var blob = item.getAsFile();if (blob.size === 0) {return;}console.info(blob);fr.readAsDataURL(blob);fr.on<x>load=function(e){var result=document.getElementById("result");//顯示文件result.innerHTML='<img src="' + this.result +'" alt="" />';}}}
}); 這樣我們就可以監聽到用戶的粘貼操作，并且將用戶粘貼的圖片文件實時的渲染到網頁之中了。
總結
以上是我對Blob對象的一些學習分享，希望在實際應用上能對大家有所幫助。
