# 上传文件与表单数据（FormData 实战）

URL: https://caijiao.org/axios/request-config/formdata-upload
Source: docs/axios/request-config/formdata-upload.md
Description: 本章节讲解如何使用 Axios 上传文件和提交表单数据，包括使用 FormData 构建请求体、设置请求头以及监听上传进度，帮助开发者在前端项目中实现文件上传和表单数据提交的完整流程。

在前端开发中，上传文件和提交表单数据是常见需求。Axios 支持通过 `FormData` 对象轻松实现这些操作。

## 1. 创建 FormData 对象

```javascript
const formData = new FormData();
formData.append("username", "Alice");
formData.append("avatar", fileInput.files[0]); // fileInput 为 <input type="file" />
```

## 2. 使用 Axios 上传文件

```javascript
import axios from "axios";

axios
  .post("https://api.example.com/upload", formData, {
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`上传进度：${percentCompleted}%`);
    },
  })
  .then((res) => console.log("上传成功：", res.data))
  .catch((err) => console.error("上传失败：", err));
```

## 3. 提交表单数据

```javascript
const form = new FormData();
form.append("email", "alice@example.com");
form.append("password", "123456");

axios
  .post("https://api.example.com/register", form)
  .then((res) => console.log("注册成功：", res.data))
  .catch((err) => console.error("注册失败：", err));
```

## 4. 注意事项

- 上传文件时必须设置 `Content-Type` 为 `multipart/form-data`；
- 可以通过 `onUploadProgress` 监听上传进度，实现上传进度条；
- FormData 可以同时传递文本字段和文件，适合复杂表单场景。

---

> 💡 小提示：结合 Axios 与 FormData，可以快速实现前端文件上传和表单提交，同时保持异步处理和错误捕获的一致性。