Como faço para postar dados de formulário com fetch api?

Meu código:

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

Tentei postar meu formulário usando fetch api, e o corpo que ele envia é assim:

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

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

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

(Não sei por que o número no limite é alterado toda vez que ele envia ...)

Desejo enviar os dados com "Content-Type": "application / x-www-form-urlencoded", o que devo fazer? Ou se eu apenas tenho que lidar com isso, como decodifico os dados no meu controlador?

Para quem responde à minha pergunta, eu sei que posso fazer isso com:

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

O que eu quero é algo como $ ("# form"). Serialize () em jQuery (sem usar jQuery) ou a forma de decodificar mulitpart / form-data no controlador. Obrigado por suas respostas.

Para citar MDN emFormData (grifo meu):

A FormDatainterface fornece uma maneira de construir facilmente um conjunto de pares de chave / valor representando campos de formulário e seus valores, que podem então ser facilmente enviados usando o XMLHttpRequest.send()método. Ele usa o mesmo formato que um formulário usaria se o tipo de codificação fosse definido como"multipart/form-data" .

Portanto, ao usar FormDatavocê está se bloqueando multipart/form-data. Não há como enviar um FormDataobjeto como corpo e não enviar dados no multipart/form-dataformato.

Se você quiser enviar os dados como application/x-www-form-urlencodedvocê terá que especificar o corpo como uma string codificada por URL ou passar um URLSearchParamsobjeto. O último infelizmente não pode ser inicializado diretamente de um formelemento. Se você não quiser iterar por meio dos elementos do formulário (o que pode ser feito usando HTMLFormElement.elements), também pode criar um URLSearchParamsobjeto a partir de um FormDataobjeto:

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

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

Observe que você não precisa especificar um Content-Typecabeçalho.

Conforme observado por monk-time nos comentários, você também pode criar URLSearchParamse passar o FormDataobjeto diretamente, em vez de anexar os valores em um loop:

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

Ele ainda tem algum suporte experimental em navegadores, então certifique-se de testar isso corretamente antes de usá-lo.

Cliente

Não defina o cabeçalho do tipo de conteúdo.

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

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

Servidor

Use o FromFormatributo para especificar que a origem da ligação são os dados do formulário.

[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; }
}

Você pode definir bodycomo uma instância de URLSearchParamscom string de consulta passada como argumento

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>

Use FormDatae fetchpara pegar e enviar dados

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"
  });
 }