Blob 與 Base64 — 二進制資料的兩種面向
在 Web 開發中，處理圖片、檔案上傳是家常便飯。但你是否曾疑惑：為什麼有時候用 Blob，有時候又要轉成 Base64？為什麼二進位只有 0 和 1，卻又冒出 0-255 這個數字？
我們從底層原理出發，徹底搞懂這些「二進位世界」的關鍵概念。
你會學到什麼
- 分清楚 Blob、File、ArrayBuffer、Base64、Data URL、Blob URL 各自代表什麼
- 知道什麼時候該用
FormData，什麼時候才適合把圖片轉成 Base64 - 用
Uint8Array讀取檔案開頭的 Magic Numbers，做前端初步檔案類型檢查 - 避免大檔案轉 Base64、忘記釋放 Blob URL、手動設定 multipart
Content-Type等常見坑
建議學習方式
這個專題不是用來背名詞的。每一篇都建議照下面的節奏讀：
- 先猜：看到程式碼時，先猜輸出會是什麼
- 再跑：打開瀏覽器 DevTools Console，把範例貼上去驗證
- 最後解釋：用自己的話說出為什麼會得到這個結果
如果猜錯了，那正是最有價值的時候。二進位、編碼、上傳格式這些主題，很多錯誤都來自直覺太像「文字世界」，而實際資料在底層是 bytes。
決策速查
| 需求 | 優先選擇 | 避免 |
|---|---|---|
| 使用者上傳圖片或檔案 | FormData + File / Blob | 先轉 Base64 再塞 JSON |
| 本頁圖片預覽 | Blob URL (URL.createObjectURL) | 大圖轉 Base64 當 src |
| 小型內嵌圖示 | Data URL / Base64 | 把大型圖片寫進 CSS 或 HTML |
| JSON API 需要附檔案 | 改成 multipart，或只傳檔案 ID | 直接 JSON.stringify(blob) |
| 檢查檔案類型 | 前端 Magic Numbers + 後端驗證 | 只信副檔名或 file.type |
學習路徑圖
章節清單
第一階段：觀念建立 (Concepts)
理解 Blob 與 Base64 的本質差異，以及電腦如何用數字表達一切。
- Blob vs Base64 — 同一份資料的兩種面貌 - 核心差異、適用場景與為何無法直接放入 HTML/JSON。
- 從 0/1 到 0-255 — 理解 Byte 的誕生 - Bit 與 Byte 的關係，以及為什麼範圍是 0-255。
第二階段：實戰轉換 (Practice)
掌握 Blob 與 Base64 的互轉技巧，並學會直接操作二進制資料。
- Blob 與 Base64 的互轉實戰 - FileReader、atob/btoa 與效能陷阱。
- 二進位外科手術 — 直接操作 ArrayBuffer - Uint8Array、Magic Numbers 與檔案驗證。
第三階段：API 整合 (Integration)
將所學應用於真實的 API 上傳場景。
- JSON + Blob 混合上傳 — FormData 完全攻略 - 解決後端同時需要結構化資料與檔案的難題。
TIP
建議導讀順序：如果你已經熟悉 Blob 與 Base64 的差異，可以直接跳到第 03 篇開始實作；如果你想深入理解底層原理，建議從第 01 篇依序閱讀。
延伸探索
完成本系列後，你可以繼續探索以下進階主題：
- 檔案上傳系統設計 — 從前端到後端的完整上傳架構
- WebRTC 媒體串流 — 即時音視訊的二進位處理