[解決済み] fetchを使用してマルチパートフォームデータをPOSTするには？

質問

このようなURLを取得しています。

fetch(url, {
  mode: 'no-cors',
  method: method || null,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'multipart/form-data'
  },
  body: JSON.stringify(data) || null,
}).then(function(response) {
  console.log(response.status)
  console.log("response");
  console.log(response)
})

私のAPIでは、データは次のようなものであることを期待しています。 multipart/form-data であることを期待しているので、私は content-type を使っています。しかし、それは私にステータスコード400の応答を与えている。

私のコードに何か問題があるのでしょうか？

どのように解決するのですか？

を設定している Content-Type になるように multipart/form-data としていますが、その後 JSON.stringify を返し、ボディデータには application/json . コンテンツタイプのミスマッチがあります。

としてデータをエンコードする必要があります。 multipart/form-data の代わりに json . 通常は multipart/form-data はファイルをアップロードするときに使われます。 application/x-www-form-urlencoded (これは HTML フォームのデフォルトです) よりも少し複雑です。

の仕様は multipart/form-data は RFC 1867 .

このようなデータを javascript で送信する方法については、以下のサイトを参照してください。 をご覧ください。 .

基本的な考え方は FormData オブジェクトを使用することです (IE < 10 ではサポートされていません)。

async function sendData(url, data) {
  const formData  = new FormData();

  for(const name in data) {
    formData.append(name, data[name]);
  }

  const response = await fetch(url, {
    method: 'POST',
    body: formData
  });

  // ...
}

について この記事 確認する ではなく を設定すること。 Content-Type ヘッダを設定する必要はありません。ブラウザが設定するのは boundary パラメータを含めて設定します。