多部分/表单数据请求在 react-native 中失败

Posted 2023-02-16

【中文标题】多部分/表单数据请求在 react-native 中失败

【英文标题】：multipart/form-data request failing in react-native

【发布时间】：2022-01-22 15:01:46

【问题描述】：

当我在 react-native 中将“Content-Type”设置为“multipart/form-data”时出现以下错误。

下面是我的代码-

const formData = new FormData();
formData.append('org_id', org_id);
formData.append('ans', userAns);
formData.append('remark', userRemark);
formData.append('img', userImg);
files.forEach(file => 
  formData.append('files', 
    name: file.fileName,
    type: file.type,
    uri: file.uri,
  );
);
const resp = await multiPartInstance(
  method: 'PUT',
  url: `$apiBaseUrl/installation/$Iid/answer/$qid`,
  data: formData,
);
return Promise.resolve(true);

我正在使用 axios 来调用 api。 multiPartInstance 是一个 axios 实例 -

const multiPartAccessToken = async (config: AxiosRequestConfig) => 
  config.headers = 
    Accept: 'application/json',
    access_token: useTokenStore.getState().accessToken,
    'Content-Type': 'multipart/form-data;',
  ;
  config.timeout = 30000;
  return config;
;

我也尝试过使用 fetch 进行上述操作，但我一直收到同样的错误。最奇怪的部分是这个请求到达了服务器，服务器也发送了一个响应，但是我得到了这个错误 react-native 端。我注意到如果我不使用 FormData 我不会收到任何错误。但是我需要使用FormData，因为我必须上传图像文件。

环境细节 -

Windows 版本 21H2（操作系统内部版本 22000.376） react-native 0.66.3 反应 17.0.2 axios ^0.24.0 react-native-image-picker ^4.3.0（用于选择图像） Flipper 版本 0.99.0

我已经尝试了以下论坛上发布的解决方案，但它们对我不起作用。

request formData to API, gets “Network Error” in axios while uploading image https://github.com/facebook/react-native/issues/24039 https://github.com/facebook/react-native/issues/28551

【参考方案1】：

我如下并且完美地工作：

    const oFormData = new FormData();    
    images.map((val, index) => 
        oFormData.append("image", 
            uri: val.uri,
            type: val.type,
            name: val.fileName
        );
    );
    return axios.post(postServiceUrl, oFormData);

【讨论】：

你的反应是什么，反应原生，axios 版本？你也可以检查你的 FLIPPER_VERSION 吗？它在 android/gradle.properties

反应原生 0.63.4，反应 16.13.1

FLIPPER_VERSION=0.54.0

【参考方案2】：

不知何故 react-native-blob-util 没有给出这个错误。我修改了我的代码如下 -

import ReactNativeBlobUtil from 'react-native-blob-util';

const fileData = files.map(file => 
  return 
    name: 'files',
    data: String(file.base64),
    filename: file.fileName,
  ;
);
try 
  const resp = await ReactNativeBlobUtil.fetch(
    'PUT',
    `$apiBaseUrl/installation/$Iid/answer/$qid`,
    
      access_token: useTokenStore.getState().accessToken,
      'Content-Type': 'multipart/form-data',
    ,
    [
      ...fileData,
      // elements without property `filename` will be sent as plain text
      name: 'org_id', data: String(org_id),
      name: 'ans', data: String(userAns),
      name: 'remark', data: String(userRemark),
      name: 'img', data: String(userImg),
    ],
  );