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

问题描述

我使用react-native-image-picker的base64生成的数据上传了一张图像。它可以很好地显示在Firebase控制台上，但是当我尝试在浏览器中查看它时，它显示“ Error Loading Preview”，当我单击它时，它只是一个黑框。查看下面的屏幕截图

这是我上传的代码：

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：Proper way to show image when Firestorage is down or Error loading preview in Firestorage for iOS，但没有区别。

解决方法

似乎Firebase的base64 putString方法和react-native涉及多个错误：请参见此线程：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();
  })
}

如果不存在，请确保添加“ data：image / 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'));
    });