菜鸟教程
教程 axios tutorial

上传文件进度监听

在前端应用中上传文件时，为了提升用户体验，可以实时显示上传进度。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 实现进度监听。

相关内容