当前位置:首页 > 行业动态 > 正文

TypeScript FormData详解

TypeScript FormData详解

1. 什么是FormData?

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

2. FormData的基本用法

2.1 创建FormData对象

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

TypeScript 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 删除数据

TypeScript FormData详解

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

formData.delete('key'); 

3. FormData与AJAX请求

3.1 发送AJAX请求

使用XMLHttpRequestfetch API发送AJAX请求,并将FormData对象作为请求体。

使用XMLHttpRequest:

TypeScript FormData详解

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; // 获取客户端发送的表单数据
  // ...处理数据...
});