浏览器不会使用 Fetch 自动为 FormData 设置请求内容类型标头

Question

我正在尝试使用 FormData 上传文件，但服务器没有收到数据。

在许多帖子和博客总结将内容类型标头设置为 multipart/form-data 覆盖了包括“边界”在内的所需格式之后，我删除了内容类型标头，假设我的浏览器将处理请求内容类型标头。网络上充斥着这种针对 formdata 的解决方案，但我找不到任何使用 FormData 时浏览器不会自动设置内容类型的情况。我的服务器工作正常，因为我能够成功发布来自 REST 客户端的请求。

这是我的 API 调用：

const data = new FormData()
data.append('file', this.state.selectedFile)

const result = await fetch("http://localhost:3000/uploadResume", {
            method: "POST",
            headers: {
                "Authorization": `Bearer ${localStorage.getItem('user_token')}`
            },
            data: data
        })

这些是浏览器（谷歌浏览器）设置的请求标头：

是否存在我遗漏的浏览器设置，或我忽略的其他潜在问题？

已解决 我错误地调用了数据集为“数据”而不是“正文”的 API。

Answer 1

Request 对象需要 body 属性

    fetch(url, {
        // data: data <-- wrong
        body: data // <-- correct
    })

---

题外话

根据您发送的少量数据（只有一个字段/文件）判断，您可以简单地将数据作为原始字节发布，而不是让它成为 FormData（使服务器更容易管道将数据写入文件并且不必处理任何 formdata 算法）+您会在接收文件时预先知道文件有多大。

    fetch(url, {
        body: this.state.selectedFile
    })

确实，你丢失了文件名，但也许你可以把它放在一些 x-filename 标题中