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

Question

我正在尝试通过获取 api 上传图像，但在真实设备 android 上出现网络请求失败错误。 我也尝试了很多来自谷歌的建议，但对我没有任何帮助。

我的依赖是：

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

Answer 1

我也面临同样的问题，但我想这个问题与 axios 库无关，而是因为 React Native 本身。

正如这里所提到的， comment是因为Flipper 。

因此，直到 React Native 使用它之前，您可以在 MainApplication.java

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

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

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

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 类型，则可以正常工作。 快乐编码

Answer 3

当我更新我不久前构建的 React Native 应用程序使用的包时，我遇到了这种情况。 事实证明，当我使用 axios v0.27.2 （在撰写本文时最新）时会发生此错误，但是当我恢复到之前安装的版本时，上传 function 工作正常，即v0.24.0 。

希望这个旧版本能够为其他人提供堡垒，并且我们等待这个问题得到正式修复。 我觉得评论 Flipper 太冒险了，因为老实说，我知道的不够多，不知道我不需要它。