网络请求失败：React Native中https图片上传Android

Question

我正在尝试通过fetch API上传图片，但在真实的安卓设备上出现网络请求失败的错误。 我也尝试了许多谷歌上的建议，但对我来说都没有起作用。

我的依赖项为：

"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"

我上传图像的代码片段：

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链接。

- Mohammad Nasrullah

Answer 1

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

如此处所述评论，这是因为Flipper导致的。

因此，在React Native解决该问题之前，您可以在MainApplication.java文件中注释掉下面提到的行。

要注释，请在上面的行前面添加//。

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

- NMahendroo

---

在像Expo这样的托管工作流中的分辨率... - Vivek Mahajan

Answer 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类型很好用。

- Sky Tech

Answer 3

我在更新我之前构建的React Native应用程序使用的软件包时遇到了这个问题。事实证明，当我使用axios v0.27.2（在撰写本文时最新版本）时，会出现此错误，但是当我恢复到先前安装的版本（即v0.24.0）时，上传功能正常工作。

希望这个旧版本也能为其他人提供帮助，同时我们等待官方修复此问题。我发现注释Flipper太冒险了，因为我不知道自己是否需要它。

- Jamie Blair