在HTTP请求时候，或者说写后端时，就会经常接触到这个 application/json和 multipart/form-data ，但是有一段时间里，我都不是很能搞清楚和分清楚它们具体的应用场景，只是模糊地使用着二者，频繁地使用着前者。

正文

它们的区别挺大的，主要体现是在 数据结构 和 场景 上(这不是废话吗)

我们先来说 JSON(application-json)

Application-JSON 请求方式

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。

主要的特点是数据结构化，方便 后端/前端 的 发送/接受，发送的数据很轻量级，所以对网络的要求会比较低，常用于登陆时传送 username 和 password。

{
    "username": "hello",
    "password": "world"
}

非常直观吧？这也是JSON的优点之一，直观，很符合人类的阅读习惯，左边对应右边。

无论是前端还是后端，都可以很方便地赋值和取用数据。

但是缺点也很明显，就是它不能传输二进制文件(如压缩包、图片等等)，它只是对文本传输非常友好

---

multipart/form-data 请求方法

此方法的最大优点估计就是可以支持二进制文件传输了(如压缩包、图片等)，这也是互联网文件上传时不得不用的一个方法，因为Application-JSON并不支持上传二进制文件。

但是，有一些网站可能会在 POST 文章的时候，直接采用 multipart/form-data 方法，图片、文章、文件一通上传到服务器API，这样做是情有可原的，但是 multipart/form-data 阅读起来并不直观，它看起来是这样的(AI生成)

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWgDLT0ADGvT

// =========================================================
// 第一部分：普通文本字段 (title)
// 边界符开始，注意前面有两个破折号
------WebKitFormBoundary7MA4YWgDLT0ADGvT
Content-Disposition: form-data; name="title"
// Content-Type: text/plain（默认可省略）

我的文章标题

// =========================================================
// 第二部分：二进制文件字段 (cover_image)
// 边界符继续分隔
------WebKitFormBoundary7MA4YWgDLT0ADGvT
Content-Disposition: form-data; name="cover_image"; filename="photo.jpg"
Content-Type: image/jpeg  // <--- 明确指出这一部分是图片

// 这里是图片的原始二进制数据流（人眼不可读）
// 比如：ÿØÿà JFIF  ... [许多乱码或编码后的数据]...

// =========================================================
// 请求体结束
// 结束边界符，注意后面多跟了两个破折号
------WebKitFormBoundary7MA4YWgDLT0ADGvT--

这并不符合阅读习惯，但是确实有这样的情况存在。但是非常不优雅。

---

现代网页开发 如何混合使用它们

现代网页开发，发布文章是一个API，上传文件是一个API，而发布文章的API接受的是 application-json ，上传文件的API接受的是 multipart-form-data。

让我们来假设一下有两个 API，发布文章的API是 /post，上传文件的API是 /upload。

而前端的不同模块组件，决定你去请求哪一个API，我们写一个文章，之后添加文件，点击发送。此时，你的前端判断是否选择了文件，如果有，那就把数据发送给 /upload 这个API，这个API返回一段JSON数据：

{
  "status": "success",
  "file_id": "9a38f0-b8c2-4d1e-9a1f",
  "url": "https://cdn.example.com/assets/articles/9a38f0.jpg"
}

是的，虽然它接受 multipart-form-data，但是返回的却是 application-json(JSON)，这个时候，你的前端可以把这个返回的JSON数据(包含文件名和PATH)添加进主要的发送体里面，一起发送给 /post 这个API。

// 这是准备发送给 /post 的 JSON 结构
{
  "title": "JSON与FormData的混合使用",
  "content": "这是文章的主要文本内容。",
  "author_id": 101
  // 在这里，前端将 /upload 返回的数据嵌入
  "attachments": [
    {
      "type": "image",
      "source_url": "https://cdn.example.com/assets/articles/9a38f0.jpg" 
    }
  ]
}

这个方法的优点是可以尝试重新上传图片，可以让后端解藕，更好维护，可以让数据更加直观…这是现代网页开发最常用的方法，也是最优雅的方法。