如何使用JavaScript Fetch API上傳檔案？

使用 JS Fetch API 上傳檔案：揭開秘密

了解如何使用 JS fetch API 上傳檔案可能是一項艱鉅的任務。為了闡明這個概念，我們將分解如何在捕獲提交事件時發送文件進行上傳。

首先，請記住輸入標籤允許我們使用檔案輸入來選擇一個檔案（甚至多個）方法。若要擷取提交事件，您需要在程式碼中指定適當的事件處理程序。

現在是關鍵部分：使用 fetch 傳送檔案。其語法為：

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

要成功傳送文件，我們需要使用文件資料填入 body 屬性並設定正確的 Content-Type 標頭。下面是一個增強的程式碼片段，示範如何執行此操作：

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

在此程式碼中，FormData 用於建立新的表單資料對象，並使用append 方法附加檔案資料。 Content-Type 標頭會自動設定為 multipart/form-data，這是檔案上傳請求所必需的。

有了這個，您的程式碼就可以輕鬆地使用 fetch API 將檔案上傳到伺服器。

以上是如何使用JavaScript Fetch API上傳檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！