如何使用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的问题？

编辑：我找到了。我正在使用本机版本0.62。*，这是github上的一个未解决问题。

Answer 1

我发现了这个问题，目前这是一个本机的开放性问题。如果任何人都面临相同的问题，并且使用的是RN 0.62版*，请按照以下步骤操作。

1. 在gradle.properties中将Flipper版本更改为0.52.0

   FLIPPER_VERSION=0.52.0
   

出于某种原因，此后我遇到了多dex错误，如果您面临相同的错误，那么：

1. 在app/build.gradle中添加

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

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

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