Blob對象怎么在JavaScript使用使用

本篇文章為大家展示了Blob對象怎么在JavaScript使用使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

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 的屬性介紹

items 介紹

items 是一個 DataTransferItemList 對象，自然里面都是 DataTransferItem 類型的數據了。

屬性

items 的 DataTransferItem 有兩個屬性 kind 和 type

方法

在原型上還有一些其他方法，不過在處理剪切板操作的時候一般用不到了。

type 介紹

一般 types 中常見的值有 text/plain 、 text/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屬性中。

FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態。

通過上面的方法以及事件，我們可以發現，通過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對象怎么在JavaScript使用使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。