詳解axios中multipart/form-data的使用

一、multipart/form-data的介紹

在網路傳輸中，multipart/form-data是一種HTTP的編碼方式，用於在web表單中傳輸二進位數據文件。 它使用 boundary 字元串來區分上傳文件的不同部分，一般用——WebKitFormBoundary隨機數來標記不同的內容。multipart/form-data此種格式的數據比常見的 application/x-www-form-urlencoded 格式多出了 boundary 欄位的格式。這種標記方法很大程度上就解決了對文件格式傳輸的問題。

boundary的計算規則
boundary=前綴隨機數(其中前綴為”————————-“，後面的隨機數是由前綴和當前時間戳組成的字元串)
　　其中：前綴的長度是26個”–“

二、使用axios的multipart/form-data

axios是一個基於Promise的HTTP請求客戶端，可同時在瀏覽器和node.js中使用。它支持請求和響應的攔截器、請求數據和響應數據的轉換、取消請求、自動轉換JSON數據、客戶端狀態和cookie（以瀏覽器為例）管理等功能。在處理multipart/form-data格式數據時，我們需要在請求中添加headers和data兩個屬性。

實例

headers:{
  'Content-Type': 'multipart/form-data'
}

data:formData

其中，headers設置Content-Type為multipart/form-data，data是拼接好的表單數據。formData 是 FormData 類型的一個實例。 在FormData實例對象中，我們可以通過對append方法的調用增加表單項。

三、上傳文件的示例代碼

Step 1 ：index.html的文件標籤配置

<form enctype="multipart/form-data" method="POST">
  <input type="file" name="image" />
</form>

Step 2 ：編寫腳本進行文件上傳

const formData = new FormData()
formData.append('image', fileInputElement.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

在formData中使用append方法來添加表單項，將要上傳的文件（本例中是一個單選文件input框）添加到表單項中，設置請求的headers中的Content-Type和data為formData。這樣就可以通過axios的post方法向伺服器端請求上傳文件了。

四、使用axios上傳多個文件

對於需要上傳多個文件的監聽，可以通過fileInput的多選屬性實現，將fileInput設置為multiple即可。

示例代碼

const formData = new FormData()
formData.append('image1', fileInputElement1.files[0])
formData.append('image2', fileInputElement2.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

五、使用axios上傳文件&其他參數

除了上傳文件以外，表單中還可能包含其他非文件的參數。可以在formData中使用同樣的方法添加非文件表單項。

示例代碼：

const formData = new FormData()
formData.append('username', 'tom')
formData.append('password', '123456')
formData.append('image1', fileInputElement1.files[0])

axios.post('/image/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  // handle success
})
.catch(error => {
  // handle error
})

六、結論

本文通過介紹multipart/form-data格式的數據傳輸、使用axios上傳單個/多個文件和實現上傳文件&其他參數，詳細講解了axios中multipart/form-data的使用，同時為開發者提供了一種具有實用性的對應數據傳輸的思路和實現方式。