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

Question

我正在使用抓取 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)

}

Answer 1

如果你发送的方式是Android，那么发送方式是错误的。

正确的uri是：

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

Answer 2

I faced same issue, it happens in Android, but works well in IOS. I guess this issue about Flipper Network.

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

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

Answer 3

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

在android/app/src/main/java/com/{你的项目}/MainApplication.java 评论以下行：
```
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
```
在android/app/src/debug/java/com/{你的项目}/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);
     });

Answer 4

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

执行以下步骤

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

FLIPPER_VERSION=0.47.0

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

Photo upload on React Native Android produce Type Error Network Error

android

multipartform-data

fetch

react-native