Node.jsアプリケーションなどでFechを用いてファイルなどのフォームデータをPOSTしてみる
FetchAPIのデフォルトのコンテンツタイプヘッダは Content-Type': 'application/jsonになっています
一方、HTML等のFormを用いてPOSTしたときのコンテンツタイプヘッダは Content-Type': 'multipart/form-dataです
コンテンツタイプヘッダを指定してPOSTするのでは駄目
コンテンツタイプヘッダを Content-Type': 'multipart/form-dataと指定してfetchしてみてもデータは送信できません。
multipart形式ではバイナリデータを転送できるため、サーバー側がフィールドデータがどこで終わり、次のフィールドデータがどこから始まるかを知る為に、ブラウザ側でboundaryというものを設定します。
そのため、コンテンツタイプヘッダをオーバーライドするだけではboundaryの設定が正常に出来ません。
解決策
コンテンツタイプヘッダをオーバーライドするだけでは上記のような問題が発生してしまうので
明示的にコンテンツタイプヘッダを明示的に削除してあげる必要があります。
index.js
constfileInput=document.querySelector('#your-file-input');constformData=newFormData();formData.append('file',fileInput.files[0]);// 送信用データを設定constoptions={method:'POST',body:formData,headers:{'Content-Type':'multipart/form-data',},};// ここで明示的に消してあげるdeleteoptions.headers['Content-Type'];// 設定したデータをPOSTfetch('your-upload-url',options);参考記事
この記事に助けられました。感謝してもしきれない。
Uploading files using 'fetch' and 'FormData'