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

Content-Type详解、Postman中binary格式、json格式数据转原始二进制流等 背景：postman中如何使用binary格式上传文件 Content-TypeContent-Type的格式由三部分组成：以下是一些常见的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- -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- -form-urlencoded 相比，它支持更复杂的数据结构，并且更适合与 RESTful API 交互。

URL编码的表单数据：application/x- -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', 'johndoe@example '); // 使用Axios发送POST请求 axios.post(' example /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- -form-urlencoded 相比，它支持传输二进制文件，并且不受 URL 长度的限制。

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

Postman中 binary格式 定义：

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

用途：

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

特点：

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

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

JSON数据转换为二进制数据

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

.将JSON对象转换为字符串（如果它还不是字符串）： const jsonObj = { key: "value", num: 123 }; const jsonString = JSON.stringify(jsonObj); 使用TextEncoder将JSON字符串编码为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' });

现在，你已经有了一个表示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);