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

【问题标题】：Firebase Cloud Storage Error Loading Preview Uploaded ImageFirebase 云存储错误加载预览上传的图像
【发布时间】：2021-01-25 00:54:54
【问题描述】：

我使用 react-native-image-picker 的 base64 生成数据上传了一张图片。它很好地显示在 Firebase 控制台上，但是当我尝试在浏览器上查看它时，它显示“错误加载预览”，当我单击它时，它只是一个黑框。见下方截图

这是我的上传代码：

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 但没有区别。

【问题讨论】：

标签： javascript firebase react-native firebase-storage react-native-image-picker

【解决方案1】：

看起来 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'));
    });

【讨论】：