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截圖後，須要在網頁上進行粘貼操做。

粘貼圖片咱們須要解決下面幾個問題

1. 監聽用戶的粘貼操做

2. 獲取到剪切板上的數據

3. 將獲取到的數據渲染到網頁中

首先咱們能夠經過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對象的一些學習分享，但願在實際應用上能對你們有所幫助。