表格数据|axios：无法从FormData获取标头，错误：getHeaders不是函数

z4bn682m 于 2022-11-23 发布在 iOS

关注(0)|答案(3)|浏览(454)

我尝试使用form-data和axios发布文本和文件字段，但出现错误：getHeaders()不是一个函数。下面是我的submit代码，注意我使用的是React和Typescript。

import * as FormData from 'form-data'
import axios from 'axios'

submit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()

  const { title, description, pictureFile } = this.state

  let data = new FormData()
  data.append('title', title)
  data.append('description', description)
  data.append('picture', pictureFile)

  axios.post('/api/route', data, {
    headers: data.getHeaders() // ERROR: getHeaders is not a function
  })
    .then(res => handle(res))
    .catch(err => handle(err))
}

我感兴趣的特定头是Authorization，我可以手动设置它，但边界是必需的，所以...我最好尝试让getHeaders()函数工作。
我不明白这里的问题，getHeaders似乎是form-data API的一部分。
请帮帮忙。

axios

来源：https://stackoverflow.com/questions/54682225/form-data-axios-unable-to-get-headers-from-formdata-error-getheaders-is-not

3条答案

按热度按时间

sr4lhrrt1#

form-data只在Node上使用，如果你在浏览器上运行它，它会切换到FormData的window's版本。我在他们的代码中看到了这一点。

module.exports = typeof self == 'object' ? self.FormData : window.FormData;

赞(0）回复(0）举报 2022-11-23

zd287kbt2#

我曾经遇到过这个问题，因为我想在nodejs里面做一些单元测试，但是我的代码稍后会在浏览器中使用。
以下是对我有效的两个解决方案：
您可以在FormData类中定义getHeaders函数：

declare global {
 interface FormData {
  getHeaders: () => {[key: string]: string};
 }
}

FormData.prototype.getHeaders = () => {
 return { 'Content-Type': 'multipart/form-data' };
};

或者您可以只编写一个三元语句：

axios.post('/api/route', data, {
    headers: data.getHeaders ? data.getHeaders() : { 'Content-Type': 'multipart/form-data' };
  })

赞(0）回复(0）举报 2022-11-23

khbbv19g3#

我们的解决方案使用Optional chaining (?.)和Nullish coalescing assignment (??=))。既适用于节点，也适用于浏览器。

const headers = form.getHeaders?.() ?? : { 'Content-Type': 'multipart/form-data' };

赞(0）回复(0）举报 2022-11-23

我来回答

表格数据|axios：无法从FormData获取标头，错误：getHeaders不是函数

3条答案

相关问题

热门标签

最新问答