Axios 发布表单数据在本机反应中无法正常工作

Posted 2023-02-22

【中文标题】Axios 发布表单数据在本机反应中无法正常工作

【英文标题】：Axios post formdata not working properly in react native

【发布时间】：2021-09-06 08:54:26

【问题描述】：

我需要在 react-native 中将图像和一些细节作为表单数据发送

为此，我使用axios post 方法。

这是我的代码：

const formData = new FormData();

formData.append('taskId', taskId);
formData.append('taskName', taskName);
formData.append('projectId', projectId);
formData.append('projectName', projectName);
formData.append('media', media);

const res = await Axios.post(`$URL`, formData, 
  headers: 
    Authorization: `Bearer $token`,
    'Content-Type': 'multipart/form-data',
  ,
);

我的服务器将媒体文件显示为空.. 谁能知道我在这里做错了什么！？

这是我的请求标头：

PS：我。已经在邮递员上进行了测试，并且其工作正常

【问题讨论】：

***.com/a/41986940/8437974 这对您的情况有帮助吗？

media 是什么类型的？

@l_bug 它是从画廊中挑选的图像。它包含类型名称和 uri

你是如何收到server-side上的请求的。

【参考方案1】：

将图片发送到后端时，您必须连同图片一起发送类型 试试这个

var formdata = new FormData();
  formdata.append('profile_image', 
    uri: media,
    name: "mediaName",
    type: mimeType
);

【讨论】：

是的，我的问题与 'image/jpg' 未上传的图像类型有关，当我用 'image/jpeg' 替换它时，它工作正常

【参考方案2】：

在我的情况下，问题在于媒体类型，如果我选择 png、jpg 或 jpeg，我用来选择媒体的库给出的媒体类型为 image/jpg。所以我像这样更新了我的代码

 mediaData.forEach((item: any, index: number) => 
     formData.append(`media`, 
          uri: item?.uri,
          type: item?.type === 'image/jpg' ? 'image/jpeg' : item?.type,
          name: item?.fileName,
     );
 );

这样更新后一切正常

【参考方案3】：

我认为问题在于您试图将 media 作为 json 对象发送。有两种方法可以解决这个问题。

1.在提交之前对媒体进行字符串化

    const formData = new FormData();
    formData.append('media', JSON.stringify(media));

您可能还需要对后端进行必要的更改以处理此问题。

2。将媒体对象拆分为单独的字段

您提到media 对象有一个名称和文件，所以您可以这样做。

    const formData = new FormData();
    formData.append('mediaName', media.name);
    formData.append('media', media.file);

请注意，在第二个示例中，我假设了 media 对象的属性。

我认为对于您的用例，第二种解决方案的一些变体是首选，因为它已经在邮递员上工作。