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

如何使用 JS Fetch API 上傳檔案

透過 fetch API 上傳檔案是將資料從 Web 應用程式傳輸到伺服器的寶貴技術。作為開發人員，了解有效處理文件上傳的流程至關重要。

考慮這樣的場景：您有一個輸入字段，允許用戶選擇文件：

<input type="file">

提交後對於包含文件輸入的表單，您需要使用fetch() 將文件傳輸到伺服器.但是，此任務需要仔細注意請求正文的結構。

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

為了建構請求正文，我們利用 FormData 介面。透過此接口，可以建立可以包含文件物件的鍵值對集合。

const formData = new FormData();
formData.append('file', input.files[0]);

在上面的程式碼中，我們使用append 方法將選取的檔案附加到FormData 物件。第一個參數代表鍵，第二個參數是從文件輸入檢索到的文件物件。

此外，如果需要，您可以在 FormData 物件中包含其他鍵值對。例如，您可以新增使用者資料：

formData.append('user', 'hubot');

準備好FormData 物件後，我們最終可以建構如下取得要求：

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

此要求將發送選定的檔案以及FormData物件中的任何其他資料到伺服器上的“/avatars”端點。然後伺服器可以根據需要處理該文件。

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