如何使用 JS Fetch API 实现文件上传？

javascript

2024-03-19 00:22:11

使用 JS Fetch API 上传文件

简介

对于一个开发人员来说，掌握各种编程工具和技术至关重要。其中，fetch API 是一个强大的工具，它允许我们在 JavaScript 中进行异步 HTTP 请求，而文件上传便是它的一项重要应用。

步骤

要使用 fetch API 上传文件，我们需要遵循以下步骤：

创建表单并允许用户选择文件

首先，创建一个 HTML 表单并添加一个文件输入元素，允许用户选择要上传的文件。

监听表单提交事件

接下来，监听表单的提交事件，当用户选择文件并点击“上传”按钮时，就会触发此事件。

使用 fetch API 上传文件

在监听表单提交事件后，我们可以使用 fetch API 上传文件。我们需要指定请求方法为“POST”并设置请求正文。

处理服务器响应

成功上传文件后，服务器会返回一个响应。我们可以使用 then() 方法处理此响应，例如，我们可以检查响应状态并进行相应处理。

示例代码

<form>
  <div>
    <label>选择要上传的文件</label>
    <input type="file">
  </div>
  <button type="submit">上传</button>
</form>

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(document.querySelector('form'));

  fetch('/files', {
    method: 'POST',
    body: formData
  })
  .then((res) => {
    if (res.ok) {
      // 文件上传成功
    } else {
      // 文件上传失败，处理错误
    }
  });
});