网络请求失败对 https 图像上传 Android 做出本机反应

Posted 2023-02-23

【中文标题】网络请求失败对 https 图像上传 Android 做出本机反应

【英文标题】：network request failed react native on https image upload Android

【发布时间】：2020-04-08 14:17:20

【问题描述】：

我正在尝试通过 fetch api 上传图片，但在真实设备 android 上出现 Network request failed 错误。 我也尝试了很多来自谷歌的建议，但对我没有任何帮助。

我的依赖是：

"react-native": "0.62.0",
"axios": "^0.19.2",
"form-data": "^3.0.0",
"react": "16.11.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

我的sn-ps用于上传图片：

const imagePick = () => 
          const formData = new FormData();

        try 

            const options = 
                title: 'Select Avatar',
                storageOptions: 
                  skipBackup: true,
                  path: 'images',
                ,
              ;

            ImagePicker.showImagePicker(options, (response) => 

                formData.append('avatar', 
                    uri: response.uri,
                   type: response.type, 
                   name: response.fileName,
                 )

                fetch(url,  
                    method: 'POST',
                    headers: 
                        'Accept': 'application/json',
                        'Content-Type': 'multipart/form-data',
                        'Authorization': `Bearer $authToken`
                    ,
                    body: formData
                )
                .then(res => 
                    console.log(res.status)
                )
                .catch(e => 
                    console.log(e)
                )

            );

         catch (e) 
            toast("Unable to upload profile photo")
        
      

我也在使用安全的 https url；

【参考方案1】：

我也遇到了同样的问题，但我猜这个问题与 axios 库无关，而是因为 React Native 本身。

这里提到comment，是因为Flipper。

所以在 React Native 使用它之前，您可以在 MainApplication.java 中的下面提到的行中发表评论

initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

要评论，请将 // 放在上面一行的前面

//initializeFlipper(this, getReactNativeHost().getReactInstanceManager());

【讨论】：

Expo 等托管工作流的解决方案 ...

【参考方案2】：

很长一段时间都有同样的问题。答案很简单。该代码适用于 iOS，但有趣的是在 android 上却失败了。

对于 android，更改为：

formData.append('avatar', 
    uri: response.uri,
    type: response.type, 
    name: response.fileName,
)

到：

formData.append('avatar', 
    uri: response.uri,
    type: `image/$response.type`, 
    name: response.fileName,
)

对我来说，图像 mime 类型导致 axios 失败。没有 iOS 上的图像 mime 类型也可以正常工作。