處理檔案時常會看到標題上的三種檔案類型，這篇來瞭解下這三者。

Blob

Blob (Binary Large Object)，是一種二進位檔案的資料，音檔、圖片等都能被儲存為 Blob 格式。在 JavaScript 中透過 Blob 才能讀取二進位類型的檔案，當然這種檔案類型並不是前端才有的。

Blob 對象表示一個不可變、原始數據的類文件對象。

如同一般檔案，Blob 也有自己的 MIME 型別及文件大小（Size）。

建立 Blob

語法為：

const blob = new Blob(array, options);

這兩個參數分別代表：

• array：存放 Array、ArrayBuffer、ArrayBufferView、Blob、DOMString 等類型的陣列。
• options：定義資料的 MIME 格式（未知則為空字串）。

實際建立的例子：

const obj = { hello: "world" };

const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

而 blob 與 ArrayBuffer 的差別在於：

• ArrayBuffer 是操作記憶體，
• Blob 是用來操作二進位檔案（但尚未參照到實體檔案上）。

我們可以透過建立出來的 Blob 使用其方法，如 slice、arrayBuffer 等。

使用 FileReader 讀取 Blob

參考以下範例，建立出 reader 後讀取 Blob。

const reader = new FileReader(); 

reader.addEventListener('load', function () {
  console.log(reader.result);
});
reader.readAsArrayBuffer(blob);

File

File 則是繼承了 Blob，並且新增了 name、lastModified、lastModifiedDate、webkitRelativePath 屬性。詳細的介紹可以參考 MDN。

File 與 Blob 不同的是，File 是實際檔案產生出的檔案物，不是新增物件後關連到 File。

我們在前端使用 <input type="file">，取得的也是 File （Filelist）。同樣的 File 也能使用 FileReader 讀取，前端中常見的上傳圖片 + 預覽也能透過 FileReader.readAsDataURL() 完成。

const input = document.querySelector("input");

input.addEventListener("change", (e) => {
    console.log(e.target.files) // 取得 FileList
})

baes64

另外再介紹 baes64。 base64 是表示二進制資料的一種方法，主要用來解決各系統和傳輸協定中二進制不兼容的問題。

我們可以透過它傳輸、儲存資料，例如以下就是透過 data URI 建立的 base64 資料圖檔 :

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAA.......

在前端使用 data URI 可以減少 HTTP Request 請求，但建議使用較小的圖檔，因為除了會讓內容增加變肥外，data URI 並不會被瀏覽器快取。

文末推薦一篇不錯的文章：

File、Blob、ArrayBuffer、Buffer联系及区别

參考資料

• 使用 Blob 和 File 相關 Web API 即時呈現上傳圖片檔案
• [WebAPIs] Blob, File 和 FileReader
• Day9– 前端小字典三十天【每日一字】– Base64