Bagaimana cara saya memposting data formulir dengan fetch api?

Kode saya:

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

Saya mencoba memposting formulir saya menggunakan fetch api, dan tubuh yang dikirimnya seperti:

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

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

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

(Saya tidak tahu mengapa nomor dalam batas berubah setiap kali dikirim ...)

Saya ingin mengirim data dengan "Content-Type": "application / x-www-form-urlencoded", apa yang harus saya lakukan? Atau jika saya hanya harus mengatasinya, bagaimana cara memecahkan kode data di pengontrol saya?

Kepada siapa menjawab pertanyaan saya, saya tahu saya bisa melakukannya dengan:

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

Yang saya inginkan adalah sesuatu seperti $ ("# form"). Serialize () di jQuery (tanpa menggunakan jQuery) atau cara untuk memecahkan kode mulitpart / form-data di controller. Terima kasih atas jawaban Anda.

Mengutip MDN padaFormData (penekanan saya):

The FormDataantarmuka menyediakan cara untuk dengan mudah membangun satu set pasangan kunci / nilai yang mewakili kolom formulir dan nilai-nilai mereka, yang kemudian dapat dengan mudah dikirim menggunakan XMLHttpRequest.send()metode. Ini menggunakan format yang sama dengan formulir yang akan digunakan jika jenis pengkodean disetel ke"multipart/form-data" .

Jadi saat menggunakan FormDataAnda mengunci diri Anda ke dalam multipart/form-data. Tidak ada cara untuk mengirim FormDataobjek sebagai badan dan tidak mengirimkan data dalam multipart/form-dataformat.

Jika Anda ingin mengirim data karena application/x-www-form-urlencodedAnda harus menentukan isi sebagai string yang dienkode URL, atau meneruskan URLSearchParamsobjek. Sayangnya yang terakhir tidak dapat langsung diinisialisasi dari sebuah formelemen. Jika Anda tidak ingin mengulang sendiri elemen formulir Anda (yang dapat Anda lakukan menggunakan HTMLFormElement.elements), Anda juga dapat membuat URLSearchParamsobjek dari FormDataobjek:

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

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

Perhatikan bahwa Anda tidak perlu menentukan Content-Typetajuk sendiri.

Seperti yang dicatat oleh monk-time di komentar, Anda juga bisa membuat URLSearchParamsdan meneruskan FormDataobjek secara langsung, daripada menambahkan nilai dalam satu putaran:

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

Ini masih memiliki beberapa dukungan eksperimental di browser, jadi pastikan untuk menguji ini dengan benar sebelum Anda menggunakannya.

Klien

Jangan setel header tipe konten.

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

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

Server

Gunakan FromFormatribut untuk menentukan bahwa sumber pengikatan adalah data formulir.

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

Anda dapat menyetel bodyke instance URLSearchParamsdengan string kueri yang diteruskan sebagai argumen

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>

Gunakan FormDatadan fetchuntuk mengambil dan mengirim data

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