Blob 與 Base64 — 二進制資料的兩種面向
在 Web 開發中，處理圖片、檔案上傳是家常便飯。但你是否曾疑惑：為什麼有時候用 Blob，有時候又要轉成 Base64？為什麼二進位只有 0 和 1，卻又冒出 0-255 這個數字？
本專題將帶你從底層原理出發，徹底搞懂這些「二進位世界」的關鍵概念。
學習路徑圖
章節清單
第一階段：觀念建立 (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 完全攻略 - 解決後端同時需要結構化資料與檔案的難題。
> **建議導讀順序**：如果你已經熟悉 Blob 與 Base64 的差異，可以直接跳到第 03 篇開始實作；如果你想深入理解底層原理，建議從第 01 篇依序閱讀。
延伸探索
完成本系列後，你可以繼續探索以下進階主題：
- 檔案上傳系統設計 — 從前端到後端的完整上傳架構
- WebRTC 媒體串流 — 即時音視訊的二進位處理