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

使用 JS Fetch API 上传文件：揭开秘密

了解如何使用 JS fetch API 上传文件可能是一项艰巨的任务。为了阐明这个概念，我们将分解如何在捕获提交事件时发送文件进行上传。

首先，请记住输入标签允许我们使用文件输入选择一个文件（甚至多个）方法。要捕获提交事件，您需要在代码中指定适当的事件处理程序。

现在是关键部分：使用 fetch 发送文件。其语法为：

fetch('/files', {
  method: 'post',
  // what goes here? What is the "body" for this? content-type header?
}).then(/* whatever */);

要成功发送文件，我们需要使用文件数据填充 body 属性并设置正确的 Content-Type 标头。下面是一个增强的代码片段，演示了如何执行此操作：

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

在此代码中，FormData 用于创建新的表单数据对象，并使用append 方法附加文件数据。 Content-Type 标头会自动设置为 multipart/form-data，这是文件上传请求所必需的。

有了这个，您的代码就可以轻松地使用 fetch API 将文件上传到服务器。

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