浏览器不会自动为带有 Fetch 的 FormData 设置请求内容类型 header

Question

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

在一些 posts 和博客结束后将内容类型 header 设置为 multipart/form-data 覆盖包含“边界”的所需格式，我删除了内容类型 header 假设我的浏览器将处理请求内容类型 header。网络上充斥着这种针对 formdata 的解决方案，但我找不到在使用 FormData 时浏览器不会自动设置内容类型的任何情况。我的服务器工作正常，因为我能够成功 post 来自 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
        })

这些是浏览器设置的请求 headers (Google Chrome) :

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

已解决 我错误地调用了 API 并将数据设置为 'data' 而不是 'body'。

Answer 1

请求 object 期望 body 属性

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

题外话

根据您发送的少量数据（只有一个 field/file）判断，您可以简单地 post 将数据作为原始字节而不是将其作为 FormData（使其成为服务器将数据通过管道传输到文件更容易一点并且不必处理任何 FormData 算法）+你会在接收文件时事先知道文件有多大。

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

所有母鹿，你失去了文件名，但也许你可以把它贴在一些 x-filename header

浏览器不会自动为带有 Fetch 的 FormData 设置请求内容类型 header

Browser does not automatically set request content type header for FormData with Fetch

javascript

multipartform-data

form-data

fetch-api

题外话