前端最常用的两种请求数据格式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
• 可以同时传文件 + 普通参数

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

五、最容易踩的坑

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