js文件的blob格式互轉


什么是Blob?
Blob 是什么? 這里說的是一種Javascript的對象類型。

oracle 中也有類似的欄位類型。

在 [JS進階] HTML5 之文件操作(file)
這一篇中用到了File對象,而實際上 file 對象只是 blob 對象的一個更具體的版本,blob 存儲着大量的二進制數據,並且 blob 的 size 和 type 屬性,都會被 file 對象所繼承。
所以, 在大多數情況下,blob 對象和 file 對象可以用在同一個地方,例如,可以使用 FileReader 接口從 blob 讀取數據,也可以使用 URL.createObjectURL() 從 blob 創建一個新的 URL 對象。

如何創建Blob
1. 使用舊方法創建 Blob 對象。

舊的方法使用 BlobBuilder 來創建一個Blob 實例,並且使用一個 append() 方法,將字符串(或者 ArrayBuffer 或者 Blob,此處用 string 舉例)插入,一旦數據插入成功,就可以使用 getBlob() 方法設置一個 mime 。

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


2. 新方法創建Blob 對象

在新的方法中直接可以通過 Blob() 的構造函數來創建了。
構造函數,接受兩個參數,第一個為一個數據序列,可以是任意格式的值,例如,任意數量的字符串,Blobs 以及 ArrayBuffers。第二個參數,是一個包含了兩個屬性的對象,其兩個屬性分別是:

type -- MIME 的類型。

endings -- 決定 append() 的數據格式,(數據中的 \n 如何被轉換)可以取值為 "transparent" 或者 "native"(t* 的話不變,n* 的話按操作系統轉換;t* 為默認) 。

  <script>
    var blob = new Blob(["Hello World!"],{type:"text/plain;charset=utf-8"});  // type:可以設置別的文件類型
  </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!");
      }
    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM