formData主要是用来做什么的？它的操作方法有哪些？

FormData 对象主要用于以表单的形式收集数据，然后通过 AJAX 或 Fetch API 异步提交到服务器。它模拟了 HTML 表单的行为，可以方便地处理表单数据，特别是包含文件上传的情况。

FormData 的主要用途：

1. 异步表单提交: 避免页面刷新，提供更好的用户体验。
2. 文件上传: 方便地处理文件上传，无需手动构建复杂的请求体。
3. 序列化表单数据: 将表单数据序列化成键值对，方便提交到服务器。
4. 构建自定义表单数据: 即使没有 HTML 表单元素，也可以使用 FormData 创建和提交数据。

FormData 的常用操作方法：

• 创建 FormData 对象:

  • new FormData(): 创建一个空的 FormData 对象。
  • new FormData(form): 传入一个 HTML 表单元素 (<form>)，FormData 会自动收集表单中的数据。

• 添加数据:

  • append(name, value): 添加一个键值对。如果键已存在，则会添加一个新的值，而不是覆盖原有值。 value 可以是字符串、Blob（例如文件）或其他数据类型。
  • set(name, value): 添加一个键值对。如果键已存在，则会覆盖原有值。
  • delete(name): 删除指定键的数据。
  • has(name): 检查是否包含指定键的数据。
  • get(name): 获取指定键的第一个值。
  • getAll(name): 获取指定键的所有值（返回一个数组）。

• 发送数据:

  通常使用 Fetch API 或 XMLHttpRequest 发送 FormData 数据。

  // 使用 Fetch API
  const formData = new FormData();
  formData.append('username', 'test');
  formData.append('file', document.querySelector('#fileInput').files[0]); // 添加文件
  
  fetch('/upload', {
      method: 'POST',
      body: formData  // 直接将 FormData 对象作为 body
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  
  
  // 使用 XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
          console.log('Success:', xhr.response);
      } else {
          console.error('Error:', xhr.status);
      }
  };
  xhr.send(formData);
  

示例：

<form id="myForm">
  <input type="text" name="username" value="test">
  <input type="file" name="avatar">
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
  const form = document.getElementById('myForm');
  const formData = new FormData(form); // 从表单收集数据

  // 添加额外的字段
  formData.append('extraField', 'extraValue');

  // 发送数据
  fetch('/submit', { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => console.log(data));
}
</script>

关键点：

• 使用 FormData 提交数据时，无需设置 Content-Type 请求头，浏览器会自动设置正确的 Content-Type ( multipart/form-data )。
• FormData 可以方便地处理文件上传，并且支持上传进度监控。

希望以上解释和示例能够帮助你理解和使用 FormData。