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

问题描述

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

在一些帖子和博客中，结论是将内容类型标头设置为multipart / form-data会覆盖包括“边界”的所需格式，我假定浏览器将处理请求内容类型标头，因此删除了内容类型标头。 Web上充斥着这种针对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
        })

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

我是否缺少浏览器设置，或者我忽略了其他潜在问题？

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

解决方法

Request对象需要一个body属性

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

---

非主题

从要发送的少量数据（仅一个字段/文件）来看，您可以简单地将数据以原始字节的形式发布，而不是将其作为FormData（这使得服务器更易于管道传输）将数据保存到文件中，而不必处理任何formdata算法）+您会知道接收文件时文件的大小。

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

所有人，您丢失了文件名，但也许您可以将其粘贴在某些x文件名标头中