Axios post 表单数据在 React Native 中无法正常工作

Question

我需要在 react-native

中以 form-data 的形式发送图片和一些详细信息

为此，我正在使用 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',
  },
});

我的服务器正在获取空的媒体文件.. 谁能知道我在这里做错了什么！？

这是我的请求header：

PS: 我。已经在 postman 上测试过，并且在

上工作正常

Answer 1

我认为问题在于您试图将 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 对象的属性。

我认为对于您的用例，第二种解决方案的一些变体是首选，因为它已经在 postman 上运行。

Answer 2

在我的例子中，问题出在媒体类型上，如果我 select 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,
     });
 });

像这样更新后一切正常

Answer 3

将图像发送到后端时，您必须将类型与图像一起发送试试这个

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

Axios post 表单数据在 React Native 中无法正常工作

Axios post formdata not working properly in react native

javascript

react-native

axios

multipartform-data