ฉันจะโพสต์ข้อมูลแบบฟอร์มด้วย fetch 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",
}

สิ่งที่ฉันต้องการคือ $ ("# form") serialize () ใน jQuery (โดยไม่ใช้ jQuery) หรือวิธีถอดรหัส mulitpart / form-data ในคอนโทรลเลอร์ ขอบคุณสำหรับคำตอบของคุณ

หากต้องการอ้างMDN ในFormData (เน้นของฉัน):

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ส่วนหัวด้วยตัวเอง

ตามที่ระบุไว้โดยพระ - เวลาในความคิดเห็นคุณยังสามารถสร้างURLSearchParamsและส่งผ่านFormDataวัตถุได้โดยตรงแทนที่จะต่อท้ายค่าในการวนซ้ำ:

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

อย่างไรก็ตามยังมีการสนับสนุนการทดลองในเบราว์เซอร์ดังนั้นโปรดทดสอบอย่างถูกต้องก่อนใช้งาน

ลูกค้า

อย่าตั้งค่าส่วนหัวประเภทเนื้อหา

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