如何使用 JavaScript Fetch API 将文件上传到服务器？

使用 JS Fetch API 上传文件

使用 JS fetch API 上传文件一开始可能会令人困惑。使用文件输入选择文件后，下一步是集成 fetch() 方法以将文件发送到服务器。

要使用 fetch API 进行文件上传，您需要构造一个 FormData 对象。该对象封装了文件数据和您希望包含的任何其他表单数据。

var input = document.querySelector('input[type="file"]');
var data = new FormData();
data.append('file', input.files[0]); // Append the selected file to the form data

除了文件之外，您还可以使用append()将其他数据添加到表单，如代码中所示下面：

data.append('user', 'hubot'); // Append additional form data

现在，您可以使用 fetch() 方法向服务器端点发出 POST 请求，将表单数据作为请求传递body:

fetch('/avatars', {
  method: 'POST',
  body: data
}).then(function(response) {
  // Handle the response from the server
});

这种方法使您能够使用 fetch API 的复杂功能方便地发送文件和其他数据。

以上是如何使用 JavaScript Fetch API 将文件上传到服务器？的详细内容。更多信息请关注PHP中文网其他相关文章！