【JS】FormData对象

FormData是表示HTML表单数据的对象。

构造函数：

let formData = new FormData([form]);

如果提供了 HTML form 元素，它会自动捕获 form 元素字段。FormData 的特殊之处在于网络方法，例如 fetch 可以接受一个 FormData 对象作为body。它会被编码并发送出去，带有 Content-Type: multipart/form-data。从服务器角度来看，它就像是一个普通的表单提交。

FormData 方法：

使用以下方法修改FormData中的字段：
1.formData.append(name, value) —— 添加具有给定 name 和 value 的表单字段。
2.formData.append(name, blob, fileName) —— 添加一个字段，就像它是 ，第三个参数 fileName 设置文件名（而不是表单字段名），因为它是用户文件系统中文件的名称。
3.formData.delete(name) —— 移除带有给定 name 的字段。
4.formData.get(name) —— 获取带有给定 name 的字段值。
5.formData.has(name) —— 如果存在带有给定 name 的字段，则返回 true，否则返回 false。
一个表单可以包含多个具有相同 name 的字段，因此，多次调用 append 将会添加多个具有相同名称的字段。
还有一个 set 方法，语法与 append 相同。不同之处在于 .set 移除所有具有给定 name 的字段，然后附加一个新字段。因此，它确保了只有一个具有这种 name 的字段，其他的和 append 一样：
1.formData.set(name, value)。
2.formData.set(name, blob, fileName)。

//用for..of循环迭代formData字段：
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 列出 key/value 对
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1，然后是 key2 = value2
}

发送带有文件的表单：

//上传图片文件
<form id="formElem">
  <input type="text" name="firstName" value="John">
  Picture: <input type="file" name="picture" accept="image/*">
  <input type="submit">
</form>

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

网络请求——表单参考内容网址