React Native S3 图片上传使用 XHR 返回“Stream Closed”答案

【问题标题】：React Native S3 image upload returns "Stream Closed" using XHRReact Native S3 图片上传使用 XHR 返回“Stream Closed”
【发布时间】：2020-08-05 14:21:17
【问题描述】：

在将 React Native 版本更新到最新的 0.63.2 并尝试将图像上传到 S3 存储桶后，XHR 返回错误 Stream Closed 图像上传在 0.61.5 版本下工作正常

代码

uploadProfile({ variables: { filetype: mime } }).then(
      ({ data: { uploadUserProfile } }) => {
        const { presignedUrl, url } = uploadUserProfile;

        console.log('presignedUrl', { presignedUrl, url });
        // uploading to s3 bucket
        const xhr = new XMLHttpRequest();
        xhr.open('PUT', presignedUrl);

        xhr.onreadystatechange = async function () {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              updateAccount({
                variables: {
                  data: {
                    profile: url,
                  },
                },
              });
            } else {
              if (/Request has expired/g.test(xhr.response))
                Toast({ message: 'slow network connection' });
              else {
                console.log({
                  response: xhr.response,
                  responseText: xhr.responseText,
                  status: xhr.status,
                });
                Toast({ message: 'internal server error' });
                await report({
                  error: {
                    response: xhr.response,
                    responseText: xhr.responseText,
                    status: xhr.status,
                  },
                }); // reporting error
              }
            }
          }
        };

        xhr.setRequestHeader('Content-Type', mime);
        xhr.send({ uri: path, type: mime });

        setLoading(false);
      },
    );

当用户想先上传个人资料图片时，应用程序向服务器发送请求并返回预签名的 URL，然后从客户端上传应用程序的工作方式。

【问题讨论】：

标签： reactjs amazon-web-services react-native amazon-s3 xmlhttprequest

【解决方案1】：

我将 Flipper 升级到 0.51.2 版，它对我有用。

转到android/gradle.properties 并添加此行

FLIPPER_VERSION=0.52.1

您的android/app/build.gradle 中应该包含以下几行

dependencies {
    // ....

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    // ...
}

【讨论】：

【解决方案2】：

升级 Flipper 版本可以解决我的问题，如果升级 Flipper 版本不能解决您的问题，请尝试此解决方案。

谁还在为这个问题苦苦挣扎。这是因为 Flipper 网络插件而发生的。我禁用了它，一切正常。

我的解决方法是评论大纲编号 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

在这个文件中android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

找到这个答案link

【讨论】：