前端最常用的两种请求数据格式application/json 和 multipart/form-data 完全解析

这两个是前端最常用的两种请求数据格式 ，核心区别在于传输的数据类型、格式结构、使用场景，也是前端面试和接口开发必考点。

我用最清晰、最实用的方式给你讲透👇

一、先记住一句话总结

1. application/json ：传普通数据 （JSON 对象、字符串、数字等），不能传文件
2. multipart/form-data ：专门用来传文件（图片 / 视频 / 文档），也能传普通数据

---

二、application/json（最常用）

1. 是什么？

标准的 JSON 格式请求，后端最容易解析，是现代前后端分离项目的默认格式。

2. 适用场景

• 登录、注册
• 增删改查接口
• 传递普通对象、数组、字符串
• 无文件上传的所有接口

3. 前端请求示例（axios）

axios({
  url: "/api/login",
  method: "post",
  // 必须指定请求头
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  },
  // 直接传 JS 对象，axios 会自动转 JSON 字符串
  data: {
    username: "test",
    password: "123456"
  }
});

4. 特点

• 数据结构清晰：key:value
• 体积小、传输快
• 不支持文件上传
• axios 默认就是这个格式（不用手动写 headers）

---

三、multipart/form-data（文件上传专用）

1. 是什么？

表单数据格式 ，会把数据分成多个 "部分" 传输，专门用于上传文件。

2. 适用场景

• 上传头像、图片
• 上传视频、Excel、PDF
• 同时传文件 + 普通字段

3. 前端请求示例（必须用 FormData）

// 1. 创建 FormData 对象
const formData = new FormData();

// 2. 添加普通数据
formData.append("username", "test");
formData.append("age", 20);

// 3. 添加文件（关键！）
formData.append("avatar", file); // file 是 input 选中的文件对象

// 4. 发送请求
axios({
  url: "/api/upload",
  method: "post",
  data: formData,
  // 重点：不要手动写 Content-Type
  // 浏览器会自动生成 multipart/form-data + boundary
});

4. 重要注意点

• 必须使用 new FormData()
• 不要手动设置 Content-Type 浏览器会自动生成带分隔符的格式：multipart/form-data; boundary=----WebKitFormBoundaryxxx
• 可以同时传文件 + 普通参数

---

四、核心区别对比表（必背）

特点	application/json	multipart/form-data
数据格式	JSON 字符串	FormData 分段格式
支持文件	❌ 不支持	✅ 完美支持
传输速度	快	稍慢（分段传输）
使用场景	普通接口	文件上传
前端写法	直接传对象	必须用 FormData
Content-Type	手动 / 自动设置	浏览器自动生成
后端解析	简单	需要文件解析库

五、最容易踩的坑

1. 传文件用了 json 格式→ 文件传不过去，后端接收不到
2. 上传文件手动写了 Content-Type→ 后端解析失败，报格式错误
3. 把 FormData 直接打印看不到内容 → 必须用 formData.get("key") 查看

---

六、快速选择指南

• 只要不上传文件 → 用 application/json
• 只要上传文件 （图片 / 视频 / 文档）→ 用 multipart/form-data

---

总结

1. application/json ：普通数据接口，默认格式，不能传文件
2. multipart/form-data ：文件上传专用 ，必须用 FormData，不手动写请求头
3. 90% 的业务接口用 json，只有上传文件用 form-data