【Node.js】FetchでフォームデータをPOSTする

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

const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

// 送信用データを設定
const options = {
  method: 'POST',
  body: formData,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
};

// ここで明示的に消してあげる
delete options.headers['Content-Type'];

// 設定したデータをPOST
fetch('your-upload-url', options);

参考記事

この記事に助けられました。感謝してもしきれない。
Uploading files using 'fetch' and 'FormData'