前端 FormData 详解

FormData 是前端用于构造表单数据的对象，常用于通过 XMLHttpRequest 或 fetch 发送表单数据，尤其是文件上传。它支持键值对形式的数据，并且可以包含文件数据。

1. 创建 FormData 对象

可以通过构造函数创建一个空的 FormData 对象，也可以基于现有的表单元素初始化。

javascript 复制代码

// 创建一个空的 FormData 对象
const formData = new FormData();

// 基于表单元素初始化
const formElement = document.querySelector("form");
const formData = new FormData(formElement);

2. FormData 的方法

FormData 提供了多种方法用于操作表单数据：

append(name, value): 添加一个新的键值对。
- name: 字段名称。
- value: 字段值，可以是字符串、Blob 或 File 对象。
- 如果字段已存在，会追加一个新值，而不是覆盖。
javascript 复制代码
```
formData.append("username", "John");
formData.append("avatar", fileInput.files[0]); // 添加文件
```
set(name, value): 设置一个键值对。
- 如果字段已存在，会覆盖旧值。
javascript 复制代码
```
formData.set("username", "Jane"); // 覆盖之前的 'John'
```
get(name): 获取指定字段的第一个值。
- 如果字段不存在，返回 null。
javascript 复制代码
```
const username = formData.get("username"); // 'Jane'
```

getAll(name): 获取指定字段的所有值，返回一个数组。

如果字段不存在，返回空数组。

javascript 复制代码

formData.append("hobby", "reading");
formData.append("hobby", "swimming");
const hobbies = formData.getAll("hobby"); // ['reading', 'swimming']

has(name): 判断是否存在指定字段。
javascript 复制代码
```
const hasUsername = formData.has("username"); // true
```
delete(name): 删除指定字段。
javascript 复制代码
```
formData.delete("username");
```
entries(): 返回一个迭代器，包含所有键值对。
javascript 复制代码
```
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}
```
keys(): 返回一个迭代器，包含所有键。
javascript 复制代码
```
for (const key of formData.keys()) {
  console.log(key);
}
```
values(): 返回一个迭代器，包含所有值。
javascript 复制代码
```
for (const value of formData.values()) {
  console.log(value);
}
```

3. 使用 FormData 上传文件

FormData 最常见的用途是上传文件。可以通过 append 方法将文件添加到 FormData 中，然后通过 fetch 或 XMLHttpRequest 发送。

示例：

html 复制代码

<input type="file" id="fileInput" />
<button id="uploadBtn">Upload</button>

<script>
  document.getElementById("uploadBtn").addEventListener("click", () => {
    const fileInput = document.getElementById("fileInput");
    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append("file", file);

    fetch("/upload", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error("Error:", error));
  });
</script>

4. 使用 FormData 发送普通表单数据

除了文件，FormData 也可以用于发送普通的表单数据。

示例：

html 复制代码

<form id="myForm">
  <input type="text" name="username" value="John" />
  <input type="email" name="email" value="[email protected]" />
</form>

<script>
  const formElement = document.getElementById("myForm");
  const formData = new FormData(formElement);

  fetch("/submit", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error("Error:", error));
</script>

5. FormData 与 JSON 的区别

FormData:
- 适合发送文件或二进制数据。
- 数据以 multipart/form-data 格式发送。
- 不需要手动设置请求头。
JSON:
- 适合发送结构化数据。
- 数据以 application/json 格式发送。
- 需要手动设置请求头 Content-Type: application/json。

6. 注意事项

文件上传:
- 使用 FormData 上传文件时，浏览器会自动设置 Content-Type 为 multipart/form-data。
- 不需要手动设置请求头。
字段重复:
- 使用 append 方法可以添加多个相同字段名的值。
- 使用 set 方法会覆盖已存在的字段值。
兼容性:
- FormData 在现代浏览器中支持良好，但在一些旧版浏览器中可能不支持。

7. 总结

FormData 是前端处理表单数据（尤其是文件上传）的强大工具。它简化了表单数据的构造和发送过程，支持键值对和文件数据，并且与 fetch 和 XMLHttpRequest 无缝集成。无论是上传文件还是提交普通表单数据，FormData 都是一个高效且便捷的选择。