React Native 中的 Axios 不提供 Form-Data headers

Question

我正在尝试使用以下代码通过 Axios（版本 ^0.26.0）在 React Native（版本 0.66.4）中上传文件：

const formData = new FormData();
formData.append('image', { 
  uri: 'aFilePathProvidedByTheImagePicker', 
  name: 'file.jpg', 
  type: 'image/jpg' 
});

const response = await this.axiosInstance.put('aCustomUrl', formData, {
 headers: {
   'Content-Type': 'multipart/form-data;',
 },
});

但它总是失败，状态代码为 400。我用 Postman 尝试了请求的端点，它工作正常。

经过一些调试和比较来自 axios 和邮递员的请求后，我发现缺少 Content-Length header。 Content-Type 中的 boundary 也没有提供。请参阅下面的屏幕截图：

邮递员：

Reicht 本机调试：

我也读到了 formData.getLengthSync() 但在 React Native 中它会导致错误 formData.getLengthSync is not a function

有没有人能解决这个问题？

根据此 post 将 axios 降级到版本 0.24.0 作为解决方法。

（出于调试目的，我使用了 fetch-api 中的构建，它按预期工作。但我更喜欢使用 axios 来使用带有请求和响应的共享实例 interceptors）

Answer 1

您的代码应该可以工作，但您可以尝试将 content-type 添加到 headers

"Content-Type": "multipart/form-data; boundary=" + formData .getBoundary(),

Answer 2

此问题已在 Axios 版本 0.27.2 中解决 (https://github.com/axios/axios/issues/4460#issuecomment-1115163147)

React Native 中的 Axios 不提供 Form-Data headers

Axios in React Native doesn't provide Form-Data headers

rest

multipartform-data

form-data

react-native

axios