这两个是前端最常用的两种请求数据格式核心区别在于传输的数据类型、格式结构、使用场景也是前端面试和接口开发必考点。我用最清晰、最实用的方式给你讲透一、先记住一句话总结application/json传普通数据JSON 对象、字符串、数字等不能传文件multipart/form-data专门用来传文件图片 / 视频 / 文档也能传普通数据二、application/json最常用1. 是什么标准的JSON 格式请求后端最容易解析是现代前后端分离项目的默认格式。2. 适用场景登录、注册增删改查接口传递普通对象、数组、字符串无文件上传的所有接口3. 前端请求示例axiosaxios({ url: /api/login, method: post, // 必须指定请求头 headers: { Content-Type: application/json;charsetUTF-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/jsonmultipart/form-data数据格式JSON 字符串FormData 分段格式支持文件❌ 不支持✅ 完美支持传输速度快稍慢分段传输使用场景普通接口文件上传前端写法直接传对象必须用 FormDataContent-Type手动 / 自动设置浏览器自动生成后端解析简单需要文件解析库五、最容易踩的坑传文件用了 json 格式→ 文件传不过去后端接收不到上传文件手动写了 Content-Type→ 后端解析失败报格式错误把 FormData 直接打印看不到内容→ 必须用formData.get(key)查看六、快速选择指南只要不上传文件→ 用application/json只要上传文件图片 / 视频 / 文档→ 用multipart/form-data总结application/json普通数据接口默认格式不能传文件multipart/form-data文件上传专用必须用FormData不手动写请求头90% 的业务接口用 json只有上传文件用 form-data