React native 0.62.0 - Android 上用于文件上传的网络请求错误答案

【问题标题】：React native 0.62.0 - Network request error on Android for file uploadReact native 0.62.0 - Android 上用于文件上传的网络请求错误
【发布时间】：2020-07-10 02:44:39
【问题描述】：

我已将 react-native 升级到 0.62，但我遇到了仅适用于 Android 的网络错误问题，iOS 工作正常。

我使用 FormData 对象来填充格式化为的数据

const data = new FormData(); 
// On Android i add file protocol to file path - file://... 
data.append('photos', { 
   uri: 'file:///data/.../my-image.jpeg', 
   type: 'image/jpeg',
   name: 'my-image.jpeg' 
});

和其他文本数据

data.append('description', 'my long description...');

有人有问题吗？

我尝试了多个 Android SDK 27、28、29，但都遇到了同样的问题 :(

问题是如果我不上传图片，但只有文本数据请求可以正常工作:(

欢迎任何建议:)？

【问题讨论】：

我遇到了同样的问题...你能解决同样的问题吗？

标签： javascript android react-native file-upload

【解决方案1】：

这是因为 Flipper 网络插件而发生的。注释文件android/app/src/debug/java/com/<yourappname>/ReactNativeFlipper.java中的第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);

【讨论】：

【解决方案2】：

在 Flipper 0.39.0 及更高版本中，此问题已得到修复。我刚刚将 Flipper 更新到 0.40.0 版本，并且运行良好。

https://github.com/facebook/flipper/issues/993#issuecomment-619823916

【讨论】：

【解决方案3】：

发布这个因为我使用 react-native-ssl-pinning 和 react-native-image-crop-picker 使它工作

表单数据

file: {
    uri: image.path,
    type: image.mime,
    name: 'image.jpg',
    fileName: 'image.jpg',
    size: image.size,
  },

和获取

fetch(url, {
  method: 'POST',
  sslPinning: { certs: ['cert'] },
  body: {
    formData: formData,
  },
  headers: {
    Authorization:
      'Bearer Token',
    Accept: 'application/json; charset=utf-8',
    'Content-type': 'multipart/form-data; charset=UTF-8',
  },
})

【讨论】：

感谢您的帮助！不过，当我切换到github.com/joltup/rn-fetch-blob 模块时，它可能对其他人有所帮助。它适用于表单数据和文件
很好，我也试试

【解决方案4】：

在 android/app/src/main/java/com/{yourProject}/MainApplication.java 评论以下行：
```
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
```
在 android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java 第 43 行评论：
```
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
```

图片上传代码：

var formData = new FormData();
   formData.append('UserId', 'abc@abc.com');
   formData.append('VisitId', '28596');
   formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20');
   formData.append('EvidenceCategory', 'Before');
   formData.append('EvidenceImage', {
     uri: Platform.OS === 'android' ? `file:///${path}` : `/private${path}`,
     type: 'image/jpeg',
     name: 'image.jpg',
   });
   axios({
     url: UrlString.BaseUrl + UrlString.imageUpload,
     method: 'POST',
     data: formData,
     headers: {
       Accept: 'application/json',
       'Content-Type': 'multipart/form-data'
     },
   })
     .then(function (response) {
       console.log('*****handle success******');
       console.log(response.data);

     })
     .catch(function (response) {
       console.log('*****handle failure******');
       console.log(response);
     });

【讨论】：