通过 fetch、XHR 和 axios 在 React Native 中上传文件在 Android 上失败，但在 iOS 上有效

Question

我已经在堆栈溢出、Github 问题、要点等方面查看了所有可能的解决方案。他们都没有工作。

基本上，我正在尝试将通过 react-native-camera 捕获的图像上传到 Java API，它可以在 iOS 上的模拟器和物理设备上运行。

function handleOnPictureTaken (image) {
  const imageName = image.uri.split('/').pop()
  const imageExtension = imageName.split('.').pop()
  const imageType = `image/${imageExtension}`
  const source = { uri: image.uri, type: imageType, name: imageName }
  onPhotoSelected(source)
}

function onPhotoSelected (image) {    
  const photoData = new FormData()
  image = {
    ...image,
    uri: image.uri.replace('file://', '')
  }
  photoData.append('file', image)
  uploadFile(photoData)
}

function uploadFile(image) {
  const config = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data'
    },
    credentials: 'include'
  }
  if (method === 'POST' || method === 'PUT') {
    if (config.headers['Content-Type'] === 'application/json') {
      config.body = JSON.stringify(data)
    } else {
      config.body = data
    }
  }

  return fetch(url, config).then(checkJSON)
    .then(res => res.text())
    .then(parseJSON)
    .catch(rejectRequest)
}

这在 iOS 上完美运行。但在 Android 上，我不断收到Network request failed，如下所示

Stack trace: TypeError: Network request failed
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:28469:31)
at call (native)
at dispatchEvent (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:34597:31)
at setReadyState (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33681:33)
at __didCompleteResponse (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33508:29)
at apply (native)
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33618:52)
at apply (native)
at emit (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:6202:42)
at apply (native)
at __callFunction (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5626:49)
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5348:31)
at __guard (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5580:15)
at callFunctionReturnFlushedQueue (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5347:21)

我一直在努力完成这项工作。物理 Android 设备在同一个 WiFi 上。正常的 POST 请求正在工作。但只有上传文件失败。

如果有人有任何建议，请告诉我。

Answer 1

请检查 AndroidManifest.xml 中的主文件，

 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:usesCleartextTraffic="true"
      android:theme="@style/AppTheme">

是否包含此文字android:usesCleartextTraffic="true"

记得创建一个新的 apk，然后检查它，

更新：

谁还在为这个问题苦苦挣扎。这是因为 Flipper 网络插件而发生的。 我禁用了它，一切正常。

我的解决方法是注释掉第 43 行

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

首先做一个干净的构建， 1.捆绑您的应用程序 2.CLea文件夹通过cd android然后./gradlew clean 3.通过./gradlew assembleDebug制作调试apk

随便查一下 Github，找到这个，请查一下。

更新 2：

链接link-rn

希望对您有所帮助。如有疑问，请随意