マルチパートフォームデータのContent-Type

マルチパートフォームデータ

multipart/form-dataは、ファイルアップロードやバイナリデータを含むHTMLフォームに使用されるContent-Typeです。フォームの各フィールドはメッセージボディ内の個別の「パート」になり、boundary文字列で区切られます。

ヘッダー値

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123

Boundaryパラメータ

boundaryはボディ内のパートを区切るユニークな文字列です。以下の条件を満たす必要があります：

• 実際のコンテンツ内に出現しないこと
• 70文字以下（RFC 2046に準拠）
• ASCII文字のみを含むこと

メッセージボディの構造

------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="username"

john_doe
------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="avatar"; filename="photo.jpg"
Content-Type: image/jpeg

[バイナリファイルデータ]
------WebKitFormBoundaryABC123--

最後のboundaryには終了を示す--が付加されることに注意してください。

重要な注意点

• ブラウザはboundaryを自動生成します：JavaScriptでFormDataを使用する場合、ブラウザはContent-Typeヘッダーを自動的に設定します。手動で設定しないでください。設定するとboundaryが一致しなくなります。
• サーバー間通信：バックエンドコードからリクエストを行う場合、自分でboundaryを設定し、ボディ構造と一致させる必要があります。

fetch()の例

// ブラウザがboundary付きのContent-Typeを自動設定
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("name", "document.pdf");

fetch("/upload", {
  method: "POST",
  body: formData  // Content-Typeを手動で設定しないこと
});