フェッチAPIを使用してフォームデータを投稿するにはどうすればよいですか？

私のコード：

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

私はfetch apiを使用してフォームを投稿しようとしましたが、送信する本文は次のようになります。

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

（送信するたびに境界内の数値が変更される理由がわかりません...）

「Content-Type」：「application / x-www-form-urlencoded」でデータを送信したいのですが、どうすればよいですか？または、それを処理する必要がある場合、コントローラーのデータをどのようにデコードしますか？

誰が私の質問に答えるか、私は次の方法でそれができることを知っています：

fetch("api/xxx", {
    body: "email=test@example.com&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

私が欲しいのは、jQueryの$（ "＃form"）。serialize（）（jQueryを使用しない）またはコントローラのmulitpart / form-dataをデコードする方法です。回答ありがとうございます。

MDNFormDataを引用（私の強調）：

このFormDataインターフェースは、フォームフィールドとその値を表すキーと値のペアのセットを簡単に作成する方法を提供します。これは、XMLHttpRequest.send()メソッドを使用して簡単に送信できます。エンコーディングタイプがに設定されて"multipart/form-data"いる場合にフォームが使用するのと同じフォーマットを使用します。

したがって、使用FormDataするときは、自分をに閉じ込めていますmultipart/form-data。FormData本体としてオブジェクトを送信する方法はなく、形式でデータを送信することはできませんmultipart/form-data。

データを送信するapplication/x-www-form-urlencoded場合は、本文をURLエンコードされた文字列として指定するか、URLSearchParamsオブジェクトを渡す必要があります。後者は残念ながらform要素から直接初期化することはできません。自分でフォーム要素を反復処理したくない場合（を使用して実行できますHTMLFormElement.elements）、URLSearchParamsオブジェクトからオブジェクトを作成することもできFormDataます。

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

Content-Typeヘッダーを自分で指定する必要はありません。

コメントのmonk-timeで指摘されているように、ループで値を追加する代わりにURLSearchParams、FormDataオブジェクトを直接作成して渡すこともできます。

const data = new URLSearchParams(new FormData(formElement));

ただし、ブラウザではまだ実験的なサポートが行われているため、使用する前に適切にテストしてください。

クライアント

content-typeヘッダーは設定しないでください。

// Build formData object.
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData",
    {
        body: formData,
        method: "post"
    });

サーバ

FromForm属性を使用して、バインディングソースがフォームデータであることを指定します。

[Route("api/[controller]")]
public class SampleDataController : Controller
{
    [HttpPost]
    public IActionResult Create([FromForm]UserDto dto)
    {
        return Ok();
    }
}

public class UserDto
{
    public string Name { get; set; }
    public string Password { get; set; }
}

引数として渡されるクエリ文字列のbodyインスタンスに設定できURLSearchParamsます

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("email=test@example.com&password=pw")
})

document.forms[0].onsubmit = async(e) => {
  e.preventDefault();
  const params = new URLSearchParams([...new FormData(e.target).entries()]);
  // fetch("/path/to/server", {method:"POST", body:params})
  const response = await new Response(params).text();
  console.log(response);
}

<form>
  <input name="email" value="test@example.com">
  <input name="password" value="pw">
  <input type="submit">
</form>

FormDataおよびfetchを使用してデータを取得して送信する

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="a@b.com">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before/after 'submit'

function card(fileUri) {
let body = new FormData();
let formData = new FormData();
formData.append('file', fileUri);

fetch("http://X.X.X.X:PORT/upload",
  {
      body: formData,
      method: "post"
  });
 }