動態

詳情 返回 返回

[axios] axios發送 及 接收處理二進制數據 - 動態 詳情

一、發送攜帶二進制數據的請求

在圖片上傳、文件上傳等場景中,需要發送payload為二進制數據的'POST'請求

注: 只要請求體中不是純 JSON 或字符串,而是包含或完全由二進制數據構成的內容 (如文件、音視頻、圖片),就需要發送payload為二進制數據的'POST'請求。

這裏的重點是設置headers,先介紹如何發送這種特殊的請求。
分別以 1.axios(config) , 2.axios.post(url[, data[, config]]) 這兩種形式的axios請求舉例。

a1.
axios({
method: 'post',
url: '/address',
data: {...},
headers: {

'Content-Type': 'multipart/form-data'

}
});

a2.
axios.post('/address', data, { headers: { 'Content-Type': 'multipart/form-data' } })

a1, a2兩種寫法等價。
對payload是 Blob 及 ArrayBuffer的情況,需要自己設置合適的 Content-Type,這兩種場景下常用的Content-Type有
'Content-Type': 'image/png', 'Content-Type': 'application/octet-stream'

二、向服務器發起請求,獲取二進制數據,處理二進制數據
發送請求後,服務器返回二進制數據,需要給axios設置正確的配置用以處理二進制數據。

這裏以get請求為例,展示 1. axios(config) 2. axios.get(url[, config]) 這兩種形式下如何告訴axios獲取的是二進制數據。

b1.
axios({
method: 'get',
url: '/address',
responseType: 'blob'
});

b2.
axios.get('/address', { responseType: 'blob' })

b1, b2兩種形式等價

responseType 的作用是告訴 Axios 該如何處理服務器返回的內容

注: responseType不是告訴服務器返回什麼,而是告訴Axios這個請求得到了什麼格式的內容,按照這個設定的格式去處理。

同步更新到自己的語雀
https://www.yuque.com/dirackeeko/blog/llgp8b1k5gse8qvc

user avatar DolphinScheduler 頭像 shoyuf 頭像 zcf0508 頭像 youli_59e8536ad7c22 頭像 sucre_199782 頭像 naiyouweiyongbao 頭像 user_nypdl4ki 頭像 lengcang 頭像 xiangninglvcha 頭像 jiangchuan_5ecf6be720834 頭像 hero123 頭像
點贊 11 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.