One article to understand the use of Vue plug-ins

FormData

你越是认真生活，你的生活就会越美好——Frank Lloyd Wright
"Fruit of Life" Classic Quotations

FormData

FormDataThe interface provides a method 表示表单数据的键值对 key/value 的构造方式, and the data can be easily XMLHttpRequest.send()sent out through the method. This interface and this method are quite simple and direct. 编码类型If set to on send "multipart/form-data", it will use the same format as the form.

If you want to build a simple GETrequest, and pass <form>the form with query parameters, you can pass it directly to URLSearchParams.

Objects that implement FormDatathe interface can for...ofbe used directly in the structure without calling entries(): for (var p of myFormData)the function for (var p of myFormData.entries())is the same as that of .

Constructor

FormData constructor

FormData()The constructor is used to create one 新的FormData对象.

grammar

var formData = new FormData(form)

parameter

form (optional)

An HTML file <form>表单元素- when specified, files created this way FormData对象will automatically be form中的表单值included, including the content of the file after being encoded.

example

The following code will create an empty FormData object:

var formData = new FormData(); // 当前为空

You can use FormData.append to add key/value pairs to the form;

formData.append('username', 'Chris');

formData.get('username') // Chris

insert image description here

Or you can use the optional form parameter to create a FormData object with preset data:

注意: 所有的输入元素都需要有name属性，否则无法访问到值。

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);

method

FormData.append():

Add a new attribute value to FormData. If the corresponding attribute value of FormData exists, it will not overwrite the original value, but add a new value. If the attribute does not exist, add an attribute value.

var formData = new FormData();
formData.append('name', '坚泓')
formData.append('name', '坚泓1')
formData.get('name') // "坚泓"
formData.getAll('name') // ["坚泓", "坚泓1"]
for (let item of formData) {
    
    
	console.log(item)
}

insert image description here

FormData.delete()

Delete a key-value pair from the FormData object.

FormData.entries()

Returns an iterator object containing all key-value pairs.

FormData.get()

Returns the FormData object associated with the given key 第一个值.

FormData.getAll()

Returns a FormData object containing all the values associated with the given key 数组.

FormData.has()

Returns a Boolean indicating whether the FormData object contains certain keys.

FormData.keys()

Returns an iterator object containing all keys.

FormData.set()
Set the attribute value for FormData, if FormData corresponds to the attribute value 存在则覆盖原值, otherwise add an attribute value.
FormData.values()

Returns an iterator object containing all values.

FormData related