【Content-Type详解、Postman中binary格式、json格式数据转原始二进制流等】

背景：

前端拿到数据大对象后，post请求传给后端。

postman中如何使用binary格式上传文件

打开Postman：启动Postman应用程序。
创建请求：在Postman中新建一个POST请求，并输入目标API的URL。
选择Body标签：在请求窗口中，点击“Body”标签页。
选择binary格式：在Body标签页中，从下拉菜单中选择“binary”作为请求体的格式。
上传文件：点击“Select Files”按钮，从本地文件系统中选择要上传的二进制文件。或者，如果文件已经在Postman的文件管理器中，可以直接选择它。
发送请求：配置完成后，点击“Send”按钮发送请求。Postman会将选定的二进制文件作为请求体发送到服务器。

Content-Type

Content-Type的格式由三部分组成：

主类型（type）、子类型（subtype）和可选参数（parameter）。

主类型（type）：
任意字符串，表示媒体的大类，如text、image、application等。其中，如果是“*”号则代表所有类型。
text：用于标准化地表示的文本信息，文本消息可以是多种字符集或者多种格式。
Multipart：用于连接消息体的多个部分构成一个消息，这些部分可以是不同类型的数据流的形式，常用于上传大型文件。
Application：用于传输应用程序数据或者二进制数据，日常前后端传输数据常用。
Message：用于包装一个E-mail消息。
Image：用于传输静态图片数据。
Video：用于传输动态影像数据，可以是与音频编辑在一起的视频数据格式。

子类型（subtype）：
任意字符串，表示媒体的具体类型，如html、jpeg、json等，用“/”与主类型隔开。其中，如果是“*”号则代表所有类型。常见的subtype有text/html、application/x-www-form-urlencoded、application/json、multipart/form-data、application/xml、text/plain、text/css、text/javascript等。

可选参数（parameter）：
指定额外的信息，如字符集编码（charset）、boundary等。
charset：指定字符编码的标准，常见的有ISO-8859-1、UTF-8、GB2312、ASCII等。
boundary：多用于上传文件时使用，用于分割数据。当content-type为multipart/form-data类型时，需要用boundary指定分隔符。

以下是一些常见的Content-Type示例：

• HTML文档标记：text/html

• 普通ASCII文档标记：text/plain

• JPEG图片标记：image/jpeg

• GIF图片标记：image/gif

• JavaScript文档标记：application/javascript

• XML文件标记：application/xml

• PDF文档：application/pdf

• 任意二进制数据（通常用于文件下载）：application/octet-stream

• JSON格式的数据：application/json 在表单中进行文件上传或发送包含文件以及非 ASCII 字符的表单数据
  axios默认的Content-Type，适用于发送JSON格式的数据。在发送JSON数据时，可以直接将 JavaScript对象传递给axios，axios会自动将其序列化为JSON字符串‌。
  一种越来越流行的数据交换格式，用于传输结构化数据。与 application/x-www-form-urlencoded 相比，它支持更复杂的数据结构，并且更适合与 RESTful API 交互。

• URL编码的表单数据：application/x-www-form-urlencoded
  特点：键值对形式的数据结构清晰明；大部分服务器和编程语言都支持该编码方式；不适合 传输大量数据及复杂数据结构。
  使用：当需要以键值对的形式发送数据（登录、注册的简单表单数据；一些传统的 Web 服务）时可使用。
  可以通过使用qs库将js对象序列化为 URL 查询字符串。

  import qs from 'qs';
  var data = {a:1,b:2}
  axios.post(url, qs.stringify(data, { indices: true }));
  配置选项 indices 的作用是，当对象包含数组时，是否在键中包含数组索引。
  

  输出 a=1&b=2&c[0]=z&c[1]=y 这样可以将对象序列化为key=value&key=value的形式‌1 2。

• 用于上传文件或包含文件的表单数据：multipart/form-data‌
  用途：是一种MIME 类型。主要用于 POST 请求中，将表单数据和文件打包发送给服务器。它是 HTML 表单中文件上传的默认编码类型，当表单的 enctype 属性设置为 multipart/form-data 时，浏览器会以该编码方式提交表单；
  在与 RESTful API 交互时，如果 API 需要接收文件或多种类型的表单数据，通常也会使用 multipart/form-data 编码方式。
  示例：

  <form action="/upload" method="POST" enctype="multipart/form-data"><input type="text" name="username"><input type="file" name="file"><button type="submit">上传</button>
  </form>
  

  通过 Axios 发送一个包含文件和其他字段的 POST 请求：// 创建一个FormData实例
  const formData = new FormData();
  // 向FormData中添加数据
  // 假设我们有一个文件输入元素，其files属性包含用户所选文件
  // const fileInput = document.querySelector('input[type="file"]');
  // formData.append('file', fileInput.files[0]); // 从文件输入中获取文件并添加到formData中// 为了演示目的，我们创建了一个Blob对象来模拟文件上传。
  const fakeFile = new Blob(['Hello, world!'], { type: 'text/plain' });
  formData.append('file', fakeFile, 'example.txt'); // 添加文件到formData，并指定文件名
  //添加其他非文件字段
  formData.append('username', 'JohnDoe');
  formData.append('email', '[e-mail]');// 使用Axios发送POST请求
  axios.post('https://example.com/upload', formData, {headers: {// Axios会自动为FormData设置Content-Type为multipart/form-data// 但你可以在这里添加其他自定义头部信息'X-Custom-Header': 'SomeValue'// 注意：不要手动设置Content-Type头，Axios会为你处理// 'Content-Type': 'multipart/form-data' // 这行应该被注释掉或删除}
  })
  .then(response => {console.log('上传成功:', response.data);
  })
  .catch(error => {console.error('上传失败:', error);
  });
  

  与 application/x-www-form-urlencoded 相比，它支持传输二进制文件，并且不受 URL 长度的限制。

在实际应用中，正确设置Content-Type对于确保数据在网络上传输和处理的正确性至关重要。开发人员在开发过程中应注意客户端发送请求和服务器响应时的Content-Type设置，以确保数据的正确解析和处理。

Postman中 binary格式

定义：

binary格式在Postman中对应着HTTP请求中的Content-Type: application/octet-stream，表示发送的是原始的二进制数据流。

用途：

主要用于上传图片、音频、视频、文档等二进制文件到服务器。

特点：

无键值对： 与form-data和x-www-form-urlencoded等格式不同，binary格式不依赖于键值对来组织数据。它直接上传文件的二进制内容，因此一次通常只能上传一个文件。

文件类型： 确保选择的文件是二进制文件，如图片、音频、视频等。非二进制文件（如文本文件）虽然也可以以二进制形式发送，但可能不是最佳实践。
文件大小： 检查服务器对上传文件的大小限制。如果文件过大，可能会导致上传失败或服务器错误。
Content-Type： 虽然Postman会自动为binary格式设置Content-Type为application/octet-stream，但在某些情况下，服务器可能期望特定的Content-Type。如果遇到这种情况，可以在Headers选项卡中手动设置Content-Type。

JSON数据转换为二进制数据

要将JSON数据转换为二进制数据，你需要先将JSON字符串编码为字节序列（例如，使用UTF-8编码），然后将这些字节序列封装成某种二进制格式（如ArrayBuffer或Blob）。

1. .将JSON对象转换为字符串（如果它还不是字符串）：

const jsonObj = { key: "value", num: 123 };
const jsonString = JSON.stringify(jsonObj);

2. 使用TextEncoder将JSON字符串编码为Uint8Array（这是UTF-8编码的字节序列）：

const encoder = new TextEncoder();
const uint8Array = encoder.encode(jsonString);

3. （可选）将Uint8Array转换为ArrayBuffer

const arrayBuffer = uint8Array.buffer;

4. （可选）将Uint8Array（或ArrayBuffer）封装为Blob（如果你需要创建一个可以下载或上传的二进制文件）：

const blob = new Blob([uint8Array], { type: 'application/json' });

现在，你已经有了一个表示JSON数据的二进制格式（ArrayBuffer或Blob）。

请求发送：
设置axios请求头：

 //post请求头headers: {'Content-Type': 'application/json;charset=UTF-8;application/octet-stream',},

• 示例：

在这个示例中，我们创建了一个隐藏的链接（a元素），设置了它的href属性为指向blob的URL，并触发了点击事件来下载文件。下载完成后，我们释放了URL对象以避免内存泄漏。

// 假设你有一个JSON对象
const jsonObj = { key: "value", num: 123 };// 将JSON对象转换为字符串
const jsonString = JSON.stringify(jsonObj);// 使用TextEncoder将字符串编码为Uint8Array（UTF-8编码）
const encoder = new TextEncoder();
const uint8Array = encoder.encode(jsonString);// 将Uint8Array转换为ArrayBuffer（如果需要）
const arrayBuffer = uint8Array.buffer;// 将Uint8Array（或ArrayBuffer）封装为Blob（如果需要）
const blob = new Blob([uint8Array], { type: 'application/json' });// 现在你可以使用arrayBuffer或blob进行进一步的操作，例如通过XMLHttpRequest或Fetch API发送数据
// 或者创建一个指向blob的URL并下载它
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'data.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);