Javascript react中node.js.getHeaders（）的等效项是什么？（在react with axios中上载文件）

我尝试向api发出补丁请求，以便上传一个文件，我可以使用Postman使其正常工作，但在我使用axios的react项目中则不行。（响应状态为200，但我尝试上载的文件未上载）

因此，我检查了postman为该请求生成的代码（它是为node.js生成的），与我所做的不同之处在于，除了

'Content-Type': 'application/json', 
'Authorization': 'Bearer randomstring.randomstring.randomstring',

他还使用FormData中的标题。那么，react中formData.getHeaders（）的等价物是什么

var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');
var data = new FormData();
data.append('userImageFile', fs.createReadStream('/C:/Users/George/Downloads/dummy.jpg'));

var config = {
  method: 'patch',
  url: 'https://api.services.thenameoftheapi.net/api/v3/billing/cebfecea-ff40-4e1f-9fb0-ca588496c787/',
  headers: { 
    'Content-Type': 'application/json', 
    'Authorization': 'Bearer randomstring.randomstring.randomstring', 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

PS：还有headers从表单数据中提取的内容 如果表单数据仅包含我上载的文件

var userImageFile;

function onFileFormSubmit(e) {
  e.preventDefault();
  const formData = new FormData();
  formData.append("userimage", userImageFile);
  // var headers = formData.getHeaders() // what would headers contain?
  props.patchUser(formData); //redux saga flow
}

function onFileChange(e) {
  userImageFile= e.target.files[0]
  e.target.nextSibling.click(); // To submit the form
}

// an in return of react component the form is the following
<form onSubmit={onFileFormSubmit}>
   <label htmlFor={"upload" + i} className="table_upload">Upload</label>
   <input className="d-none" id={"upload" + i} onChange={onFileChange} type="file"></input>
   <button className="d-none" type="submit"></button>
</form>

---

你正在用标题做一些奇怪的事情。以下是一个稍微简化的版本，理论上应按原样工作：

import axios from "axios";

const axiosApi = axios.create({
  baseURL: 'https://api.services.thenameoftheapi.net/api/v3'
});

axiosApi.interceptors.request.use(function (config) {
  config.headers = {
    ...config.headers,
    'Authorization': 'Bearer ' + localStorage.getItem("accessToken")
  };
  return config;
});

// I renamed "config" to "params", to avoid confusion
export function patch(url, data, params = {}) {
  let headers = {};

  if (params.headers) {
    headers = params.headers
    delete params.headers;
  }

  // Here, don't do { ...data }, you are destroying the FormData instance!
  return axiosApi
    .patch(url, data, { params, headers })
    .then(({ data }) => data)
}

这将导致请求具有以下标头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxXxXxXx

---

npm包只是本机浏览器FormData的一个端口。NodeJS版本允许您使用

.getHeaders（）

获取请求的内容类型。但在浏览器中，它是本机的，并且它本身可以很好地处理边界，因此您不需要设置

内容类型

头，事实上，您不应该这样做（），并且在发送文件时，内容类型永远不能是

应用程序/json

。它将始终是

多部分/表单数据

。您的第一个示例之所以有效，是因为

…data.getHeaders（）

覆盖了该属性（请在您的第一个示例中尝试

console.log（config）

以了解我的意思）这次我没有在请求中指定内容类型，通过使用chrome dev tools中的network选项卡，我看到请求头中的内容类型是

content-type:application/json；charset=UTF-8

我认为它会自动使用

多部分/表单数据

，因为我将其留空，如果我自己将其设置为多部分/表单数据，我可以在请求标题的网络选项卡中看到

内容类型：多部分/表单数据

，但当我将其设置为多部分/表单数据时，我会得到错误状态400。您能显示代码吗在你的React应用程序中发出请求？你给我们看的代码片段只是创建了一个新的FormData，但没有对它做任何处理。我做了你建议的更改，但我仍然得到了400。内容类型现在是多部分/表单数据，但我看不到边界。看起来你没有像传递

补丁

函数{…data}那样传递

FormData

正如你所说的正在销毁formData实例…非常感谢

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxXxXxXx