Http请求头

application/x-www-form-urlencoded 和 multipart/form-data 都是 HTTP 请求中的 Content-Type 类型，用来描述请求体（body）中数据的格式。这两种格式在使用场景和数据传输方式上有所不同。

1. application/x-www-form-urlencoded

• 主要用途：这种格式通常用于提交表单数据，尤其是那些包含文本数据的表单

+ **数据编码方式**：
  - 在这种格式下，所有的数据都会以键值对的形式进行编码，键和值之间使用等号（`=`）连接，不同的键值对之间使用 `&` 分隔。
  - 特殊字符（如空格、`&`、`=` 等）会被 URL 编码成百分比（`%`）形式。例如，空格会被编码为 `+`，而 `&` 会被编码为 `%26`。

示例：

Copy Codeusername=johndoe&password=123456

• 请求体示例：

Copy Codekey1=value1&key2=value2&key3=value3

• 适用场景：适用于简单的表单数据提交，如用户名和密码的登录表单等。
• 限制：
  • 由于数据是 URL 编码的，发送的文件数据会被编码为字符串格式，无法直接传输二进制数据（如文件、图片）。
  • 它通常用于较小的数据量，因为大数据量的编码可能会使请求体变得非常庞大。
• 示例代码：

javascriptCopy Codeaxios.post('https://example.com', {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: 'key1=value1&key2=value2'
});

2. multipart/form-data

• 主要用途：这种格式用于上传文件或处理包含文件和二进制数据的表单。它允许在同一个请求中提交文本和文件数据。
• 数据编码方式：
  • 在这种格式下，表单数据会被分成多个部分，每个部分都有自己的内容类型。每个部分都会用一个分隔符（boundary）隔开。每个部分可以包含不同的数据类型，包括文本和文件（如二进制文件）。
  • 文件数据不会进行 URL 编码，而是以其原始二进制格式传输。

示例：

Copy Code--boundary
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg

(binary data of the file)

--boundary--

• 请求体示例：

Copy Code--boundary
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png

(binary data)

--boundary--

• 适用场景：适用于文件上传（如图片、音频、视频等）以及包含混合数据（文本和文件）的表单提交。
• 限制：
  • 由于数据格式复杂，并且允许发送文件，这种格式会比 application/x-www-form-urlencoded 更加占用带宽和资源。
  • 使用这种格式时，通常会自动生成一个 boundary，用来区分每个数据部分。
• 示例代码：

javascriptCopy Codeconst formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', 'john');

axios.post('https://example.com/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

总结对比

特性	application/x-www-form-urlencoded	multipart/form-data
适用场景	主要用于表单数据（文本数据）。	主要用于上传文件，传输二进制数据或混合数据。
数据编码方式	键值对形式，数据进行 URL 编码。	按照 multipart 格式，文本和文件分开传输。
是否支持文件上传	不支持文件上传。	支持文件上传和二进制数据。
是否进行 URL 编码	会进行 URL 编码（空格转为 + ，特殊字符转为 % ）。	不进行 URL 编码，直接传输原始二进制数据。
请求体大小限制	小数据量，通常在 1MB 以下。	支持大文件上传，理论上没有大小限制（受限于服务器配置）。
适用数据类型	适用于文本数据（如表单提交的用户名、密码）。	适用于文本和二进制数据混合的情况（如文件上传）。

何时使用哪个？

• **使用 ****application/x-www-form-urlencoded**：
  • 当你只需要提交简单的表单数据（如用户名、密码、选项等）时，使用这种格式会比较简单高效。
• **使用 ****multipart/form-data**：
  • 当你需要上传文件或传输复杂的数据（文本 + 文件）时，应该使用这种格式，因为它允许你同时上传文件和表单字段，并且不会对文件数据进行编码，能保持文件的原始格式。