先貼代碼：
const base64String = window.btoa(String.fromCharCode(...new Uint8Array(buffer)))
看起來非常的簡潔，優美。那么我們今天就來捋一捋，這個看似簡單的背后，蘊含了怎樣的原理。
首先我們得來說說arrayBuffer這回事。
在JavaScript中，有一個很常用的引用數據類型Array,你可以在里面放字符串、數字、對象、布爾值等等等等。它存放在堆中，可以自由增減。
而ArrayBuffer我們叫它類型化數組，它的誕生就是為了解決一個問題：操作二進制數據。
只由0和1組成的二進制數據往往是非常巨大的，上千個字節可以說司空見慣，傳統的Array這時候處理起二進制數據起來就顯得非常低效，所以ArrayBuffer出現了，它作為一塊專用的內存區域存放在棧中，取數據非常快。
我們現在通過new ArrayBuffer(10)初始化一個buffer實例，看看會得到什么。
let buffer = new ArrayBuffer(10);
console.log(buffer);
ArrayBuffer(10) {} [[Int8Array]]: Int8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] [[Int16Array]]: Int16Array(5) [0, 0, 0, 0, 0] [[Uint8Array]]: Uint8Array(10) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] byteLength: 10 __proto__: ArrayBuffer
可以看到在ArrayBuffer中，主要存放了幾個“視圖”，Int8Array表示8位有符號整數數組，Int16Array表示16位有符號整數數組，Uint8Array則表示8位無符號整數數組。
當然，如果比如說我們想取出Int8Array這個數組來，是不能直接通過buffer.Int8Array來取的。這是因為ArrayBuffer不能直接通過下標去讀寫，我們需要把它轉成一個類型化數組（TypedArray）。
const myTypedArray = new Uint8Array(buffer)
轉化完之后，我們我們不僅可以通過下標去對類型化數組進行索引，也可以獲取其length，當然TypedArray仍與普通的Array存在細微的區別，那就是假設我們用超出邊界的索引語法去獲取數組元素時，
TypedArray並不會去原型鏈中進行查找。
現在我們已經拿到了這個類型化數組，是時候把它轉成普通字符串了。看看String.fromCharCode這個函數，它接受的參數為一堆代碼單元序列，輸出一個普通字符串。而我們剛剛得到的類型化數組，里
面存放的正是代碼單元。
const str = String.fromCharCode(...myTypedArray)
這里我們用拓展運算符...把類型數組的代碼單元解出來，一次性轉完，得到一個普通的字符串。
最后，我們需要借助一個window對象的方法，也就是btoa方法，它的作用是：把一個普通字符串編碼成base-64格式的字符串。
有時候后台把圖片資源通過arrayBuffer傳給前端，這時候為了能正常顯示，我們還需要在轉化的base64字符串前面拼接上data:image/jpeg;base64,
所以我們整理一下，可以得出這樣一個函數：
const arrayBufferToBase64Img = (buffer) => { const str = String.fromCharCode(...new Uint8Array(buffer)); return `data:image/jpeg;base64,${window.btoa(str)}`;
}
總結
得到一個ArrayBuffer ---> 轉成類型化數組以正常讀取 --> 轉成普通字符串 --> 轉成base64字符串