programming javascript multipart/form-data FormData append fetch multipart/form-data form-data npm Axios post form-data form-data nodejs form-data postman

Hướng dẫn what is formdata object in javascript? - đối tượng formdata trong javascript là gì?

Giao diện FormData cung cấp một cách để dễ dàng xây dựng một tập hợp các cặp khóa/giá trị biểu thị các trường biểu mẫu và các giá trị của chúng, sau đó có thể dễ dàng gửi bằng phương thức fetch[] hoặc XMLHttpRequest.send[]. Nó sử dụng cùng một định dạng Một biểu mẫu sẽ sử dụng nếu loại mã hóa được đặt thành "multipart/form-data".FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch[] or XMLHttpRequest.send[] method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

Bạn cũng có thể chuyển nó trực tiếp cho hàm tạo 


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
0 nếu bạn muốn tạo các tham số truy vấn theo cách mà 

  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
1 sẽ làm nếu sử dụng gửi đơn giản 

  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
2.

Một đối tượng thực hiện FormData có thể được sử dụng trực tiếp trong cấu trúc 


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
4, thay vì 

  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
5: 

  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
6 tương đương với 

  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
7.

Lưu ý: Tính năng này có sẵn trong các nhân viên web. This feature is available in Web Workers.

Người xây dựng


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
8

Tạo một đối tượng FormData mới.

Phương pháp thể hiện

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}
0

Lối nhiều giá trị mới vào một khóa hiện có bên trong đối tượng FormData hoặc thêm khóa nếu nó chưa tồn tại.

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}
2

Xóa một cặp khóa/giá trị khỏi đối tượng FormData.

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}
4

Trả về một tererator lặp lại thông qua tất cả các cặp khóa/giá trị có trong FormData.

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}
6

Trả về giá trị đầu tiên được liên kết với một khóa đã cho từ trong một đối tượng FormData.

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}
8

Trả về một mảng của tất cả các giá trị được liên kết với một khóa đã cho từ trong vòng FormData.


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
0

Trả về xem một đối tượng FormData có chứa một khóa nhất định.


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
2

Trả về một trình lặp lặp đi lặp lại thông qua tất cả các khóa của các cặp khóa/giá trị có trong FormData.


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
4

Đặt một giá trị mới cho một khóa hiện có bên trong đối tượng FormData hoặc thêm khóa/giá trị nếu nó chưa tồn tại.


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
6

Trả về một trình lặp lặp lại thông qua tất cả các giá trị có trong FormData.

Thông số kỹ thuật

Sự chỉ rõ
Xmlhttprequest tiêu chuẩn # giao diện-pormdata
# interface-formdata

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Chương này là về việc gửi các biểu mẫu HTML: có hoặc không có tệp, với các trường bổ sung, v.v.

Các đối tượng FormData có thể giúp với điều đó. Như bạn có thể đoán, nó là đối tượng để thể hiện dữ liệu biểu mẫu HTML.

Hàm tạo là:

let formData = new FormData[[form]];

Nếu phần tử HTML 


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };
8 được cung cấp, nó sẽ tự động nắm bắt các trường của nó.

Điều đặc biệt về FormData là các phương thức mạng, chẳng hạn như 


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
0, có thể chấp nhận một đối tượng FormData như một cơ thể. Nó được mã hóa và gửi ra với 

  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
2.

Từ quan điểm máy chủ, trông giống như một bản gửi biểu mẫu thông thường.

Gửi một biểu mẫu đơn giản

Hãy để gửi một hình thức đơn giản trước.

Như bạn có thể thấy, đó là gần như một lớp lót:


  
  
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Trong ví dụ này, mã máy chủ không được trình bày, vì nó vượt quá phạm vi của chúng tôi. Máy chủ chấp nhận yêu cầu POST và trả lời người dùng đã lưu.

Phương pháp FormData

Chúng ta có thể sửa đổi các trường trong FormData bằng các phương thức:

  • 
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    4 - Thêm trường biểu mẫu với 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    5 và 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    6 đã cho
  • 
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    7 - Thêm một trường như thể nó là 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    8, đối số thứ ba 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    9 đặt tên tệp [không phải tên trường biểu mẫu], vì nó là tên của tệp trong hệ thống tập tin của người dùng,
  • formData.append["image", imageBlob, "image.png"];
    0 - Xóa trường với 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    5 đã cho,
  • formData.append["image", imageBlob, "image.png"];
    2 - Nhận giá trị của trường với 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    5 đã cho,
  • formData.append["image", imageBlob, "image.png"];
    4 - Nếu tồn tại một trường với 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    5 đã cho, trả về 
    formData.append["image", imageBlob, "image.png"];
    6, nếu không 
    formData.append["image", imageBlob, "image.png"];
    7

Một biểu mẫu được phép về mặt kỹ thuật để có nhiều trường có cùng 


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
5, do đó, nhiều cuộc gọi đến 
formData.append["image", imageBlob, "image.png"];
9 thêm các trường giống nhau.

Ngoài ra còn có phương pháp FormData0, với cùng cú pháp với 

formData.append["image", imageBlob, "image.png"];
9. Sự khác biệt là FormData2 loại bỏ tất cả các trường với 

  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
5 đã cho, và sau đó nối thêm một trường mới. Vì vậy, nó đảm bảo có một trường chỉ có một trường có 

  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
5 như vậy, phần còn lại giống như 
formData.append["image", imageBlob, "image.png"];
9:

  • FormData6,
  • FormData7.

Ngoài ra, chúng tôi có thể lặp lại các trường formdata bằng cách sử dụng vòng lặp FormData8:

let formData = new FormData[];
formData.append['key1', 'value1'];
formData.append['key2', 'value2'];

// List key/value pairs
for[let [name, value] of formData] {
  alert[`${name} = ${value}`]; // key1 = value1, then key2 = value2
}

Gửi một biểu mẫu với một tệp

Biểu mẫu luôn được gửi dưới dạng 


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
2, mã hóa này cho phép gửi các tệp. Vì vậy, các trường 

  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
8 cũng được gửi, tương tự như một bản gửi biểu mẫu thông thường.

Ở đây, một ví dụ với hình thức như vậy:


  
  Picture: 
  



  formElem.onsubmit = async [e] => {
    e.preventDefault[];

    let response = await fetch['/article/formdata/post/user-avatar', {
      method: 'POST',
      body: new FormData[formElem]
    }];

    let result = await response.json[];

    alert[result.message];
  };

Gửi một biểu mẫu với dữ liệu blob

Như chúng tôi đã thấy trong chương tìm nạp, nó dễ dàng gửi dữ liệu nhị phân được tạo động, ví dụ: một hình ảnh, như fetch[]1. Chúng tôi có thể cung cấp nó trực tiếp dưới dạng tham số 


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
0 fetch[]3.

Mặc dù vậy, trong thực tế, nó thường thuận tiện để gửi một hình ảnh không riêng biệt, nhưng là một phần của biểu mẫu, với các trường bổ sung, chẳng hạn như tên của tên và các siêu dữ liệu khác.

Ngoài ra, các máy chủ thường phù hợp hơn để chấp nhận các hình thức được mã hóa nhiều phần, thay vì dữ liệu nhị phân thô.

Ví dụ này gửi một hình ảnh từ fetch[]4, cùng với một số trường khác, làm hình thức, sử dụng FormData:


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }

Xin lưu ý cách thêm hình ảnh fetch[]1:

formData.append["image", imageBlob, "image.png"];

Điều đó giống như khi có fetch[]7 trong biểu mẫu và khách truy cập đã gửi một tệp có tên fetch[]8 [đối số thứ 3] với dữ liệu fetch[]9 [đối số thứ 2] từ hệ thống tập tin của họ.

Máy chủ đọc dữ liệu biểu mẫu và tệp, như thể nó là một bản gửi biểu mẫu thông thường.

Bản tóm tắt

Các đối tượng FormData được sử dụng để nắm bắt biểu mẫu HTML và gửi nó bằng cách sử dụng 


  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
0 hoặc phương thức mạng khác.

Chúng ta có thể tạo XMLHttpRequest.send[]1 từ biểu mẫu HTML hoặc tạo một đối tượng mà không có biểu mẫu, sau đó nối các trường bằng các phương thức:

  • 
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    4
  • 
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    7
  • FormData6
  • FormData7

Hãy lưu ý hai đặc thù ở đây:

  1. Phương thức FormData0 loại bỏ các trường có cùng tên, 
    formData.append["image", imageBlob, "image.png"];
    9 không có. Đó là sự khác biệt duy nhất giữa họ.
  2. Để gửi một tệp, cần phải có cú pháp 3-angument, đối số cuối cùng là tên tệp, thông thường được lấy từ hệ thống tập tin người dùng cho 
    
  

  

  
    canvasElem.onmousemove = function[e] {
      let ctx = canvasElem.getContext['2d'];
      ctx.lineTo[e.clientX, e.clientY];
      ctx.stroke[];
    };

    async function submit[] {
      let imageBlob = await new Promise[resolve => canvasElem.toBlob[resolve, 'image/png']];

      let formData = new FormData[];
      formData.append["firstName", "John"];
      formData.append["image", imageBlob, "image.png"];

      let response = await fetch['/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      }];
      let result = await response.json[];
      alert[result.message];
    }
    8.

Các phương pháp khác là:

  • formData.append["image", imageBlob, "image.png"];
    0
  • formData.append["image", imageBlob, "image.png"];
    2
  • formData.append["image", imageBlob, "image.png"];
    4

Đó là nó!

Đối tượng FormData trong JS là gì?

Trong JavaScript, một đối tượng FormData là một cách phổ biến để tạo một gói dữ liệu để gửi đến máy chủ bằng XMLHTTPREQUEST hoặc FETCH.Nó sao chép chức năng của phần tử hình thức HTML.Chúng ta có thể nghĩ về nó như một mảng mảng.Có một mảng cho mỗi phần tử mà chúng tôi muốn gửi đến máy chủ.a common way to create a bundle of data to send to the server using XMLHttpRequest or fetch. It replicates the functionality of the HTML form element. We can think of it as an array of arrays. There is one array for each element that we want to send to the server.

Tại sao chúng ta sử dụng FormData trong JavaScript?

Giao diện FormData cung cấp một cách để dễ dàng xây dựng một tập hợp các cặp khóa/giá trị biểu thị các trường biểu mẫu và các giá trị của chúng, sau đó có thể dễ dàng gửi bằng phương thức Fetch [] hoặc XMLHttPRequest.Send [].Nó sử dụng cùng một định dạng Một biểu mẫu sẽ sử dụng nếu loại mã hóa được đặt thành "Multipart/Form-dữ liệu".provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch[] or XMLHttpRequest.send[] method. It uses the same format a form would use if the encoding type were set to "multipart/form-data" .

Chúng ta có thể gửi đối tượng trong formdata không?

Có bạn có thể, bạn có thể nối vào các đối tượng FormData., you can append to formData objects.

Formdata [] trong React là gì?

Dữ liệu mẫu React là một hỗn hợp phản ứng cho phép bạn lấy dữ liệu từ dạng HTML ở định dạng đối tượng JavaScript đẹp.a React mixin that will allow you to get data from an html form in a nice javascript object format.

Bài Viết Liên Quan

Hướng dẫn chuyển html sang pdf
Hướng dẫn superglobal php - superglobal php
Quy định thưởng tết 2023
Hướng dẫn operator in javascript - toán tử trong javascript
Hướng dẫn how to remove space after variable in python - cách xóa khoảng trắng sau biến trong python
Hướng dẫn 2d array to list python - Mảng 2d để liệt kê python
Hướng dẫn javascript sum numbers in string - javascript tổng số trong chuỗi
Hướng dẫn click html button python - bấm vào nút html python
Hướng dẫn html dom parser javascript - html trình phân tích cú pháp dom javascript
Hướng dẫn python all topics list - python danh sách tất cả các chủ đề
Hướng dẫn wordpress pass javascript variable to php - wordpress chuyển biến javascript sang php
Hướng dẫn video streaming php github - phát trực tuyến video php github
Hướng dẫn how to get weather information in javascript - cách lấy thông tin thời tiết trong javascript
Xe máy grande 2023
Hướng dẫn update date in mysql - ngày cập nhật trong mysql
Hướng dẫn dùng http statuses trong PHP
Hướng dẫn required php extension not found intl cpanel - phần mở rộng php bắt buộc không tìm thấy intl cpanel
Hướng dẫn do i need to know javascript for php? - tôi có cần biết javascript cho php không?
Hướng dẫn check php version wordpress - kiểm tra phiên bản php wordpress
Hướng dẫn how do i check if a string contains a word in python? - làm cách nào để kiểm tra xem một chuỗi có chứa một từ trong python không?

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
6 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
6 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
6 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
6 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
6 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
6 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
6 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
6 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
6 tháng trước

Bài mới nhất

Lỗi font chữ trong tiêu đề thư trong outlook 2007 năm 2024
Lỗi không cài dat dirve may in sp7000 năm 2024
Lý luận mác lênin có phải đã lỗi thời năm 2024
Viết một đoạn văn tả cây bóng mát năm 2024
Lỗi trùng chưng minh thư của người phụ thuộc năm 2024
Top 10 headhunt tuyen dung bat dong san hieu qua năm 2024
Vé máy bay từ buôn mê thuột đi thanh hóa năm 2024
Kèo ft châu á 1x2 là gì năm 2024
Bài văn tưởng tượng biến thành con meo trong 3ngay năm 2024
Bài tập về phân số toán lớp 6 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng So Sánh Bài tập So sánh Tiếng anh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học