JavaScript 處理 Blob 物件：使用 FileReader 讀取二進位資料並 Base64 編碼

問題背景

前端透過 <input type="file"> 取得 File 物件（繼承 Blob），直接 toString() 僅得到 "[object Blob]"。需將二進位內容轉為 Base64 字串上傳至後端。

正確做法：FileReader API

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 可選：只讀取部分區塊（斷點續傳）
    const slice = file.slice(start, end);

    const base64 = await readAsBase64(slice);
    // 呼叫 AJAX 上傳 base64 字串
    upload(base64);
});

function readAsBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result.split(',')[1]); // 移除 data: 前綴
        reader.onerror = reject;
        reader.readAsDataURL(blob);
    });
}

後端 PHP 解碼範例

<?php
$base64 = $_POST['fileData'];
$binary = base64_decode($base64);
file_put_contents('upload/' . $filename, $binary);
?>

常見誤區

• 直接 btoa(blob)：btoa 僅接受二進位字串，無法處理 Blob 物件。
• 同步讀取阻塞 UI：FileReader.readAsDataURL 為非同步，必須使用 Promise/async-await 或回調處理。
• 大檔案記憶體壓力：Base64 體積膨脹 33%，超過 50MB 檔案建議改用 FormData 直接二進位上傳。

進階：分片上傳雛形

const CHUNK_SIZE = 1024 * 1024; // 1MB
for (let offset = 0; offset < file.size; offset += CHUNK_SIZE) {
    const chunk = file.slice(offset, offset + CHUNK_SIZE);
    const base64 = await readAsBase64(chunk);
    await uploadChunk(index, base64);
}

總結

前端處理 Blob/File 二進位資料的標準方式是 FileReader.readAsDataURL 或 readAsArrayBuffer，配合 Promise 封裝即可輕鬆完成 Base64 編碼與分片上傳。