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

【问题标题】：multipart/form-data request failing in react-native多部分/表单数据请求在 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

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

【问题讨论】：

标签： react-native axios

【解决方案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)},
    ],
  );

【讨论】：