时间戳

首页 > 解决方案 > 浏览器不会使用 Fetch 自动为 FormData 设置请求内容类型标头

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

问题描述

我正在尝试使用 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。

标签： javascriptmultipartform-datafetch-apiform-data

解决方案

Request 对象需要一个body属性

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

无关

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

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

一切正常，您丢失了文件名，但也许您可以将其粘贴在某些 x-filename 标题中

推荐阅读