菜鸟教程
教程 axios tutorial

上传文件与表单数据（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，可以快速实现前端文件上传和表单提交，同时保持异步处理和错误捕获的一致性。

相关内容