/

如何使用 FormData 物件

如何使用 FormData 物件

了解什麼是 FormData 物件以及如何使用它

FormData 物件用於儲存表單輸入欄位的值。

當您需要將文件發送到伺服器時，它非常有用。

這可能是您實際需要它的唯一時間。

下面是一個使用 FormData 通過 fetch 發送文件內容的示例。

我們有一個輸入欄位：

1
<input type="file" id="fileUpload" />

我們在其上附加了一個 change 事件處理程式：

1
2
3
document.querySelector('#fileUpload').addEventListener('change', event => {
 handleImageUpload(event)
})

並且我們在 handleImageUpload() 函數中管理大部分邏輯：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const handleImageUpload = event => {
 const files = event.target.files
 const formData = new FormData()
 formData.append('myFile', files[0])

 fetch('/saveImage', {
 method: 'POST',
 body: formData
 })
 .then(response => response.json())
 .then(data => {
 console.log(data)
 })
 .catch(error => {
 console.error(error)
 })
}

在這個示例中，我們將其 POST 到 /saveImage 端點。

您也可以通過將其附加到 formData 物件來發送更多數據。

在伺服器端，要存取檔案資料，您必須將請求解析為多部分表單。

參考例如如何在 Next.js 表單中上傳文件。

您創建的 FormData 物件具有許多有用的方法：

  • append()：將值添加到物件中，並指定鍵。如果鍵已經存在，則值將添加到該鍵，而不會消除第一個值。
  • delete()：刪除鍵值對。
  • entries()：返回一個迭代器物件，您可以使用它來列出主機的鍵值對。
  • get()：獲取與鍵關聯的值。如果已添加多個值，則返回第一個值。
  • getAll()：獲取與鍵關聯的所有值。
  • has()：如果存在鍵，則返回 true。
  • keys()：返回一個迭代器物件，您可以使用它來列出所持有的鍵。
  • set()：將值添加到物件中，並指定鍵。如果鍵已經存在，則將替換該值。
  • values()：返回一個迭代器物件，您可以使用它來列出所持有的值。

FormData 物件是 XMLHttpRequest 2 規範的一部分。

在所有現代瀏覽器中都可以使用，最常用於通過 fetch 發送圖像。

請參考如何處理伺服器端上傳的圖片。