如何使用 JavaScript Fetch API 掌握文件上传？

使用 JS fetch API 掌握文件上传

使用 JS fetch API 可能会令人畏惧，尤其是在处理文件上传时。让我们通过逐步分解来简化此过程。

1.捕获文件输入

如代码中所示，使用文件输入元素允许用户选择文件：

Select file to upload

Convert

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中文网其他相关文章！