前端 File 上傳、下載，Canvas 儲存圖片，Ajax 和 Fetch 二進位制流傳輸，PDF 預覽，瀏覽器上 WebAssembly 的應用 等等都需要用到 ArrayBuffer 和 Blob 。檔案就具體介紹一下這些物件的相互轉換。

API介紹

1. FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，使用 File 或 Blob 物件指定要讀取的檔案或資料。
2. Blob 物件表示一個不可變、原始資料的類檔案物件。它的資料可以按文字或二進位制的格式進行讀取，也可以轉換成 ReadableStream 來用於資料操作。Blob
   表示的不一定是 JavaScript 原生格式的資料。File 介面基於 Blob，繼承了 blob 的功能並將其擴充套件使其支援使用者系統上的檔案。
3. ArrayBuffer 物件代表儲存二進位制資料的一段記憶體，它不能直接讀寫，只能通過檢視（TypedArray 檢視和 DataView 檢視)來讀寫，檢視的作用是以指定格式解讀二進位制資料。
4. Uint8Array 物件是 ArrayBuffer 的一個數據型別（8 位不帶符號整數）。
5. TextEncoder 接受程式碼點流作為輸入，並提供 UTF-8 位元組流作為輸出。
6. TextDecoder 介面表示一個文字解碼器，一個解碼器只支援一種特定文字編碼，例如 utf-8、iso-8859-2、koi8、cp1261，gbk
   等等。解碼器將位元組流作為輸入，並提供程式碼點流作為輸出。

注意： 二進位制陣列並不是真正的陣列，而是類似陣列的物件。

字元與ArrayBuffer，Uint8Array相互轉換

1. TextEncoder => ArrayBuffer

let encoder = new TextEncoder();

// 字元 轉 Uint8Array
let uint8Array = encoder.encode("你好啊");

// Uint8Array 轉 ArrayBuffer
let arrayBuffer = uint8Array.buffer

2. Blob => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
blob.arrayBuffer().then(buffer=>{
  // ArrayBuffer
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
})

3. FileReader => ArrayBuffer

let str = 'hello，你好嗎？'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
let fr = new FileReader()
fr.readAsArrayBuffer(blob)
fr.onload = function(res) {
  // ArrayBuffer
  let buffer = fr.result
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
}

歡迎訪問：天問部落格