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

使用 JS fetch API 掌握文件上傳

使用 JS fetch API 可能會令人畏懼，尤其是在處理文件上傳時。讓我們透過逐步分解來簡化此過程。

1.擷取檔案輸入

如程式碼所示，使用檔案輸入元素允許使用者選擇檔案：

<form>
  <div>
    <label>Select file to upload</label>
    <input type="file">
  </div>
  <button type="submit">Convert</button>
</form>

2.處理提交事件

捕獲提交事件（將佔位符替換為您首選的事件處理程序）：

document.querySelector('form').addEventListener('submit', (event) => {
  // Prevent default form submission
  event.preventDefault();
  
  // Retrieve the selected file
  const input = event.target.querySelector('input[type="file"]');
  
  // Construct the request body
  const formData = new FormData();
  formData.append('file', input.files[0]);
  
  // Submit the request
  fetch('/files', {
    method: 'POST',
    body: formData
  }).then(/* perform necessary actions */);
});

3.構造請求正文

要使用fetch 傳送文件，請使用 FormData API。它創建一個多部分/表單資料請求正文。將所選檔案(input.files[0]) 和任何其他資料（例如使用者資訊）附加到formData 物件：

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

4.啟動fetch 要求

準備好請求正文後，使用fetch 發送POST 請求，指定端點URL（'/files'）並提供formData物件作為正文：

fetch('/files', {
  method: 'POST',
  body: formData
})
.then(/* handle the response as desired */);

瞧！您現在擁有使用 JS fetch API 的功能齊全的檔案上傳機制。

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