Firebase云存储错误加载预览已上传图像

Question

以下是我的上传代码：

const uploadImage = async ({data, filename, uri}) => {
    const ext = uri.split('.').pop();
    const name = uri.split('/').pop();
    const path = `${user.uid}_${name}`;
    const storageRef = firebase.storage().ref(`profiles/${path}`);
    storageRef
        .putString(data, 'base64', {contentType: `image/${ext}`})
        .then(function (snapshot) {
            console.log('SUCCESSSSS');
        });
};

    useEffect(() => {
        ImagePicker.showImagePicker((response) => {
            //console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                console.log(response.uri);
                uploadImage(response);

                setAvatar({uri: response.uri});
            }
        });
    }, []);

编辑：我将base64字符串复制到一个在线转换器中，看起来不错，它返回了正确的图像。看起来，数据没有问题。firebase的处理方式有问题。

编辑：我尝试显式地将类型设置为image/jpeg而不是image/jpg，如下所述：当Firestorage关闭时显示图像的正确方式，或者在Firestorage for iOS中加载预览时出错，但没有区别。

Answer 1

看起来有很多bug涉及到Firebase的bas64 putString方法和react-母语：请参阅以下线程：https://github.com/firebase/firebase-js-sdk/issues/576.我遵循了yonahforst的答案，最终使用了Blob。完美地工作。

复制在这里，以防线程消失：

function urlToBlob(url) {
  return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onerror = reject;
      xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
              resolve(xhr.response);
          }
      };
      xhr.open('GET', url);
      xhr.responseType = 'blob'; // convert type
      xhr.send();
  })
}

如果不存在，请确保添加“数据：图像/jpeg；base64,9asdf92349…”。我使用的是react native image picker，所以它没有现成的功能。

const dataURL = 'data:image/jpeg;base64,' + data;
    urlToBlob(dataURL).then((blob) => {
        storageRef
            .put(blob)
            .then(function (snapshot) {
                const downloadURL = snapshot.ref.getDownloadURL().then((link) => {
                    console.log('link: ', link);
                    user.updateProfile({photoURL: link});
                });
            })
            .then(() => console.log('SUCCESS'));
    });