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

【问题标题】：How to upload image with axios using form data in react-native如何使用 react-native 中的表单数据通过 axios 上传图像
【发布时间】：2020-08-08 19:04:25
【问题描述】：

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

我检查了其他类似的答案，但没有一个有效。

这是我尝试过的两种方法，但它不起作用。我在以下方法中收到 Error: Network Error。

  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 上的一个未解决问题。

【问题讨论】：

Ciao，您确认bodyFormData 仅包含您要发送到服务器的照片？另一个问题：你得到的错误只是Error: Network Error？没有其他可用信息？
如果这仍然是邮递员的问题，那么您可能是以错误的方式发送参数或服务器问题。
@WaheedAkhtar 在邮递员中没有，它工作正常。正如您在我附上的图片中看到的那样。
@GiovanniEsposito Ciao，是的，bodyFormData 包含图像和其他两个参数，我正在正确发送这些参数。在问题中附加完整的网络错误图像。
疑似与stackoverflow.com/questions/59359834相似；这有帮助吗？

标签： react-native axios multipartform-data

【解决方案1】：

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

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

出于某种原因，在此之后我遇到了一个多 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
}

【讨论】：