如何使用 JavaScript Fetch API 将文件发送到服务器？

如何使用 JS Fetch API 上传文件

通过 fetch API 上传文件是将数据从 Web 应用程序传输到服务器的一项宝贵技术。作为开发人员，了解有效处理文件上传的流程至关重要。

考虑这样的场景：您有一个输入字段，允许用户选择文件：

<input type="file">

提交后对于包含文件输入的表单，您需要使用 fetch() 将文件传输到服务器。但是，此任务需要仔细注意请求正文的结构。

fetch('/files', {
  method: 'POST',
  // What goes here? How do we construct the body?
})

为了构造请求正文，我们利用 FormData 接口。通过此接口，可以创建可以包含文件对象的键值对集合。

const formData = new FormData();
formData.append('file', input.files[0]);

在上面的代码中，我们使用append 方法将选定的文件附加到FormData 对象。第一个参数代表键，第二个参数是从文件输入中检索到的文件对象。

此外，如果需要，您可以在 FormData 对象中包含其他键值对。例如，您可以添加用户数据：

formData.append('user', 'hubot');

准备好 FormData 对象后，我们最终可以构造如下获取请求：

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

此请求将发送选定的文件以及 FormData 对象中的任何其他数据到服务器上的“/avatars”端点。然后服务器可以根据需要处理该文件。

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