【Content-Type詳解、Postman中binary格式、json格式數據轉原始二進制流等】

Content-Type詳解、Postman中binary格式、json格式數據轉原始二進制流等

- 背景：
- - postman中如何使用binary格式上傳文件
Content-Type
- - Content-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-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', 'johndoe@example.com');// 使用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）。

.將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);