如何使用 react-native 中的表单数据使用 axios 上传图像

Question

我正在尝试使用 axios 和 formData 在 React Native 中捕获图像后上传图像。我正在使用 react-native-camera 包来捕获图像。

我已经检查了其他类似的答案，但其中 none 有效。

这两种方法我都试过了，但都不行。我在下面的方法中收到 错误：网络错误。

  let bodyFormData = new FormData();
  bodyFormData.append(`q_image_${serial}`, {
    uri: 'file:///data/user/0/com.student/cache/Camera/b6217266-35d5-4a0c-b09e-0c9f12777194.jpg', 
    type: 'image/jpeg',
    name: 'someName',
  });
  
  const { data } = await axios({
    method: 'post',
    url: `${baseURL}/service.php`,
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
    data: bodyFormData
  });

  console.log('UPLOAD', data);

我使用以下方法从服务器收到未上传图片的响应。

  let bodyFormData = new FormData();
  bodyFormData.append(`q_image_${serial}`, 'file:///data/user/0/com.student/cache/Camera/b6217266-35d5-4a0c-b09e-0c9f12777194.jpg');
  
  const { data } = await axios({
    method: 'post',
    url: `${baseURL}/service.php`,
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
    data: bodyFormData
  });

  console.log('UPLOAD', data);

服务器工作正常。我可以使用邮递员上传图片。

这是 react-native-camera 或 formData 或 axios 的问题吗？

编辑：我找到了。我正在使用 react-native 版本 0.62.*，这是 github.

上的一个未决问题

Answer 1

我找到了这个问题，目前这是 react-native 的未决问题。如果有人面临同样的问题并且使用的是 RN 版本 0.62.*，请按照以下步骤操作。

在 gradle.properties 中将 Flipper 版本更改为 0.52.0
```
FLIPPER_VERSION=0.52.0
```

出于某种原因，在此之后我遇到了 multi-dex 错误，如果您遇到同样的问题，那么：

在app/build.gradle中添加

implementation 'com.android.support:multidex:1.0.3'

在app/build.gradle中的defaultConfig中添加multiDexEnabled true。

defaultConfig {
   applicationId "com.packageName"
   minSdkVersion rootProject.ext.minSdkVersion
   targetSdkVersion rootProject.ext.targetSdkVersion
   versionCode 1
   versionName "1.0"
   multiDexEnabled true
}

如何使用 react-native 中的表单数据使用 axios 上传图像

How to upload image with axios using form data in react-native

multipartform-data

react-native

axios