# 上传文件进度监听

URL: https://caijiao.org/axios/file-transfer/upload-progress
Source: docs/axios/file-transfer/upload-progress.md
Description: 本章节讲解如何使用 Axios 上传文件，并实时监听上传进度，包括 FormData 使用方法、onUploadProgress 回调实现进度条显示，提升用户上传体验和前端交互性能。

在前端应用中上传文件时，为了提升用户体验，可以实时显示上传进度。Axios 提供了 `onUploadProgress` 回调函数来实现这一功能。

## 1. 使用 FormData 构建上传数据

```javascript
const fileInput = document.querySelector("#fileInput");
const formData = new FormData();
formData.append("file", fileInput.files[0]);
```

## 2. Axios 上传文件并监听进度

```javascript
import axios from "axios";

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

## 3. 前端进度条示例

```html
<progress id="uploadProgress" value="0" max="100"></progress>
```

```javascript
axios.post("/upload", formData, {
  headers: { "Content-Type": "multipart/form-data" },
  onUploadProgress: (e) => {
    const progressBar = document.getElementById("uploadProgress");
    progressBar.value = Math.round((e.loaded * 100) / e.total);
  },
});
```

## 4. 优势

- **提升用户体验**：实时显示上传进度，避免用户疑惑；
- **增强交互性**：可配合进度条或提示组件显示；
- **兼容性良好**：在现代浏览器中均支持 XMLHttpRequest 上传进度事件。

---

> 💡 小提示：onUploadProgress 回调仅适用于浏览器环境，在 Node.js 中上传文件可使用其他库如 `form-data` 或 `axios-progress-bar` 实现进度监听。