JS 之Blob 對象類型

時間 2019-11-17

原文原文鏈接

什麼是Blob?

Blob 是什麼？這裏說的是一種Javascript的對象類型。web

oracle 中也有相似的欄位類型。瀏覽器

這一篇中用到了File對象，而實際上 file 對象只是 blob 對象的一個更具體的版本，blob 存儲着大量的二進制數據，而且 blob 的 size 和 type 屬性，都會被 file 對象所繼承。app

因此，在大多數狀況下，blob 對象和 file 對象能夠用在同一個地方，例如，能夠使用 FileReader 藉口從 blob 讀取數據，也能夠使用 URL.createObjectURL() 從 blob 建立一個新的 URL 對象。函數

如何建立Blob

1. 使用舊方法建立 Blob 對象。ui

舊的方法使用 BlobBuilder 來建立一個Blob 實例，而且使用一個 append() 方法，將字符串（或者 ArrayBuffer 或者 Blob，此處用 string 舉例）插入，一旦數據插入成功，就能夠使用 getBlob() 方法設置一個 mime 。spa

  <script>
    var builder = new BolbBuilder();
    builder.append("Hello World!");
    var blob = builder.getBlob("text/plain");
  </script>

2. 新方法建立Blob 對象操作系統

在新的方法中直接能夠經過 Blob() 的構造函數來建立了。
構造函數，接受兩個參數，第一個爲一個數據序列，能夠是任意格式的值，例如，任意數量的字符串，Blobs 以及 ArrayBuffers。第二個參數，是一個包含了兩個屬性的對象，其兩個屬性分別是：.net

type -- MIME 的類型。code

endings -- 決定 append() 的數據格式，（數據中的 \n 如何被轉換）能夠取值爲 "transparent" 或者 "native"（t* 的話不變，n* 的話按操做系統轉換；t* 爲默認）。

  <script>
    var blob = new Blob(["Hello World!"],{type:"text/plain"});
  </script>

Blob的應用

1. 大文件分割 (slice() 方法)

slice() 方法接受三個參數，起始偏移量，結束偏移量，還有可選的 mime 類型。若是 mime 類型，沒有設置，那麼新的 Blob 對象的 mime 類型和父級同樣。

當要上傳大文件的時候，此方法很是有用，能夠將大文件分割分段，而後各自上傳，由於分割以後的 Blob 對象和原始的是獨立存在的。

不過目前瀏覽器實現此方法尚未統一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice() ，其餘瀏覽器則正常的方式 slice()

能夠寫一個兼容各瀏覽器的方法：

    function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
      if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
      } else {
          throw new Error("This doesn't work!");
      }
    }