reactjs - React Native S3 图片上传使用 XHR 返回 "Stream Closed"

Question

将 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 并从客户端上传，这是应用程序的工作方式。

Answer 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'
    }

    // ...
}