TypeScript FormData详解

1. 什么是FormData？

FormData是一个用于封装表单数据的类，通常用于在AJAX请求中发送表单数据，它可以用来处理文件上传和表单数据。

2. FormData的基本用法

2.1 创建FormData对象

要创建一个FormData对象，首先需要获取表单元素，然后使用FormData构造函数创建一个新的FormData实例。

const formElement = document.querySelector('form');
const formData = new FormData(formElement);

2.2 添加表单数据

使用append()方法向FormData对象中添加数据。

formData.append('key', 'value');

2.3 添加文件

使用append()方法向FormData对象中添加文件。

const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);

2.4 删除数据

使用delete()方法从FormData对象中删除数据。

formData.delete('key');

3. FormData与AJAX请求

3.1 发送AJAX请求

使用XMLHttpRequest或fetch API发送AJAX请求，并将FormData对象作为请求体。

使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload', true);
xhr.send(formData);

使用fetch API：

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

3.2 接收服务器响应

在服务器端，可以使用req.body获取到客户端发送的表单数据，在Node.js的Express框架中：

app.post('/api/upload', (req, res) => {
  const formData = req.body; // 获取客户端发送的表单数据
  // ...处理数据...
});