在 Axios 中发送 POST 请求并携带参数通常有以下两种方式

文章目录

  • [一、 JSON 格式传递参数](#一、 JSON 格式传递参数)
  • [二、FormData 格式传递参数(包括文件上传)](#二、FormData 格式传递参数(包括文件上传))
  • 参考文档

一、 JSON 格式传递参数

  • 如果你的后端接口期待接收 JSON 格式的请求体,可以这样做:
  • 在这个例子中,data 对象会被转换成 JSON 并放在请求体(request body)中发送。
js 复制代码
import axios from 'axios';

const data = {
  username: 'user1',
  password: '123'
};

axios.post('https://api.example.com/login', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

二、FormData 格式传递参数(包括文件上传)

  • 如果需要上传文件或者以表单形式提交数据,可以使用 FormData 对象:
  • 当使用 FormData 时,一般情况下不需要手动设置 Content-Type,因为 Axios 能够自动识别并设置正确的值。所以下面的 headers 也是可以省略的
js 复制代码
let formData = new FormData();
formData.append('username', 'user1');
formData.append('file', fileInputElement.files[0]);

axios.post('https://api.example.com/upload', formData, {
  headers: {'Content-Type': 'multipart/form-data' } // 不指定时axios会自动设置
})
.then((response) => {
  // 处理响应
})
.catch((error) => {
  // 处理错误
});

参考文档

相关推荐
令狐前生16 分钟前
Intellij IDEA 2025 破解安装
java·ide·intellij-idea
数聚天成DeepSData44 分钟前
数聚天成 DeepSData 数据价值落地实战指南
java·maven·devops
小小小米粒1 小时前
阿姆达尔定律(Amdahl‘s Law)
java·开发语言
知彼解己1 小时前
Java 版本演进
java·开发语言·spring boot
极客先躯1 小时前
高级java每日一道面试题-2026年05月11日-实战篇[Docker]-如何容器化金融产品推荐系统?
java·运维·docker·容器·金融·高级面试·金融产品推荐系统
朱容zr3331331 小时前
为什么推荐使用自增主键?使用UUID作为主键的优缺点是什么?
java·运维·数据库·后端·mysql·面试·性能优化
知彼解己2 小时前
Eclipse Temurin:企业级 Java JDK 发行版的最佳实践
java·ide·eclipse
朱容zr3331332 小时前
请解释“回表”的概念。
java·前端·数据库
不吃辣4902 小时前
vibe coding | 如何做一个 AI 音乐生成工具?
java·人工智能·后端·ai·ai编程
NWU_LK2 小时前
【WebFlux】第八篇 —— 自定义调度器
java