如何使用 JavaScript Fetch API 將檔案上傳到伺服器？

使用 JS Fetch API 上傳檔案

使用 JS fetch API 上傳檔案一開始可能會令人困惑。使用檔案輸入選擇檔案後，下一步是整合 fetch() 方法以將檔案傳送到伺服器。

要使用 fetch API 進行檔案上傳，您需要建構一個 FormData 物件。該物件封裝了文件資料和您希望包含的任何其他表單資料。

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data

除了檔案之外，您還可以使用append()將其他資料加入表單，如程式碼所示：

data.append('user', 'hubot'); // Append additional form data

現在，您可以使用fetch () 方法向伺服器端點發出POST 請求，將表單資料作為請求傳遞body:

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});

這種方法使您能夠使用fetch API 的複雜功能方便地傳送檔案和其他資料。

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