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

Question

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

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

这是我尝试过的两种方法，但它不起作用。我收到错误：以下方法中的网络错误。

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

标签： react-nativeaxiosmultipartform-data

Answer 1

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

1. 将 Flipper 版本更改为gradle.properties0.52.0

   FLIPPER_VERSION=0.52.0
   

出于某种原因，在此之后我遇到了一个多 dex 错误，如果你也面临同样的问题：

2. 在app/build.gradle添加

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

3. 在. multiDexEnabled true_app/build.gradle

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