使用 fetch 上传文件 - Javascript

在开发 Web 应用程序时，通常需要向服务器上传文件。通常，我们使用使用 XMLHttpRequest 对象或 FormData 发送表单数据。但是，使用 fetch API，我们可以发送文件和表单数据。在本文中，我们将探讨如何使用 fetch API 来上传文件。

获取文件

首先，我们需要获取需要上传的文件。我们可以通过 <input> 标签或者 JavaScript 来获取。

通过 HTML <input> 标签

<input type="file" id="file">

const fileInput = document.getElementById('file');
const file = fileInput.files[0];

通过 JavaScript

const file = new File([/* content */], 'filename.txt', { type: 'text/plain' });

创建 FormData

使用 FormData，我们可以轻松地在表单中发送文件。

const formData = new FormData();
formData.append('file', file);

append 方法的第一个参数是表单字段的名称，第二个参数是文件对象。

发送请求

使用 fetch API 发送请求。

fetch('/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

完整代码片段

const fileInput = document.getElementById('file');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

以上就是使用 fetch 上传文件的基本步骤。使用 fetch，我们可以轻松地上传表单数据，包括文件和其他字段。