使用 fetch 上傳 FormData 踩坑
先上結論, 使用fetch
和FormData
, 不能設定Content-Type
header !!!!
緣起
想要 通過blob
上傳二進位制檔案到伺服器, 很自然用瞭如下程式碼
let formData = new FormData(); formData.append('xxx', Blob, 'filename'); await fetch(url, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, body: formData, });
但是伺服器一直報錯, 返回無法識別body
排錯
-
換成
xmlRequest
上傳, 依然報錯 -
使用其它工具上傳(
postman/insomnia
), 正常 -
使用
fetch
上傳, 報錯 -
對比 傳送的資料, 發現使用
fetch
上傳的Header
為:
Content-Type multipart/form-data
而 使用其它工具上傳時,Header
為
Content-Type: multipart/form-data; boundary=X-INSOMNIA-BOUNDARY
多了一個boundary
屬性
原因
使用FormData
傳輸二進位制資料,伺服器需要一種方法來知道一個欄位的資料何處結束以及下一個資料的起始位置.而boundary
定義了我們在請求中傳送的欄位之間的分隔符. 當刪除我們手動定義的Content-Type
之後, 瀏覽器會新增正確的boundary