在 React Native Android 上上传照片会产生类型错误网络错误答案

【问题标题】：Photo upload on React Native Android produce Type Error Network Error在 React Native Android 上上传照片会产生类型错误网络错误
【发布时间】：2020-03-07 22:06:21
【问题描述】：

我正在使用 fetch API 执行照片上传，并且一直收到Type Error Network Request Error。我在模拟器和设备上收到相同的错误。我使用 react-native-image-crop-picker 作为照片上传数据的来源。有什么想法吗？

const handlePhotoUpload =  async (image: any, token: string) => {

      const { path, filename, mime } = image;

      const uri = path.replace("file://", "")
      const file = {
        uri,            
        type: mime,           
        name: filename             
      };

      const body = new FormData()
      body.append('file', file)

      const config = {
        method: 'POST', 
        headers: { 'Authorization': 'Bearer ' + token },
        body
      };

      return await fetch(`${<API URL>}/user/photo`, config)

}

【问题讨论】：

检查您的互联网连接以及是否可以从设备访问服务器 URL。还要附上错误的完整堆栈跟踪。
没有意义的是我使用相同的服务器 URL 进行其他 API 调用。
<API URL> 是什么？你有这些变量吗？

标签： android react-native fetch multipartform-data

【解决方案1】：

我遇到了同样的问题，它发生在 Android 中，但在 IOS 中运行良好。一世猜猜这个关于 Flipper Network 的问题。

有一段时间，我评论了 initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

在这个文件中 /android/app/src/main/java/com/{your_project}/MainApplication.java

【讨论】：

【解决方案2】：

以下步骤帮助我解决了同样的问题。以防万一，

在 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);
     });

【讨论】：

【解决方案3】：

我知道回复晚了，但对其他人有帮助

执行以下步骤

在您的项目目录中单击 android 文件夹，然后打开 gradle.properties 并将翻转器版本更改为此

FLIPPER_VERSION=0.47.0

【讨论】：

【解决方案4】：

如果你发送的方式是安卓，那就是错误的方式。

正确的 uri 是：

uri: Platform.OS === "android" ? path : path.replace("file://", "")

【讨论】：

我删除了文件：/// 但我得到了网络错误
@KhaledBoussoffara 网络错误与路径不同。