表單 enctype="multipart/form-data" 詳解：檔案上傳的核心機制

為何檔案上傳必須設定 multipart/form-data？

預設表單編碼 application/x-www-form-urlencoded 僅支援鍵值對字串，**無法傳輸二進位檔案內容**。multipart/form-data 將表單拆分為多個「部分」，每部分獨立擁有 Header (Content-Disposition, Content-Type) 與 Body，使伺服器能正確解析檔案二進位流。

核心特性

• 二進位安全：檔案內容不經 URL 編碼，直接以原始位元組傳輸。
• 邊界分隔：Content-Type 標頭包含 boundary=----WebKitFormBoundaryxxx，伺服器依此分割各欄位。
• 混合欄位：同一請求可同時包含一般文字欄位 (name="username") 與檔案欄位 (name="avatar"; filename="a.png")。

前端範例

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="text" name="username" />
  <input type="file" name="avatar" />
  <button type="submit">上傳</button>
</form>

後端處理重點

• Spring MVC：@RequestParam("avatar") MultipartFile file + MultipartResolver Bean。
• Servlet 3.0+：request.getPart("avatar") 需在 web.xml 或 @MultipartConfig 設定 maxFileSize、location (暫存目錄)。
• Node.js：multer、busboy 中介軟體解析 Stream。

常見坑點

1. 忘記加 enctype → 後端收到檔案欄位為空或檔案名字串。
2. 未設定暫存目錄權限 → 大檔上傳失敗 (IO Exception)。
3. 前端用 FormData 手動組裝時，不要 手動設定 Content-Type，瀏覽器會自動帶入 boundary。