如何將檔案轉成 Base64 編碼

Posted on Edited on In Word count in article: 113 Reading time ≈ 1 mins.

建立 HTML

首先在 HTML 建立一個 File Upload 與一個顯示結果的 div

1
2
3
<input type="file" />

<div id="result"></div>

綁定事件

接下來為 File Upload 綁定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.querySelector('input').addEventListener('change', function () {

       // 建立 FileReader 去讀取 File Upload 的內容

       let reader = new FileReader();

       // 設定初始化事件

       reader.onload = function () {

           let arrayBuffer = this.result;

           let base64 = btoa(
               new Uint8Array(arrayBuffer)
                   .reduce((data, byte) => data + String.fromCharCode(byte), '')
           );
       
         document.querySelector('#result').innerHTML = arrayBuffer + '  ' + arrayBuffer.byteLength;    
       }

      // 開始讀取

      reader.readAsArrayBuffer(this.files[0]);

   }, false);

📜 參考資料

  1. MDN btoa