Ошибка Firebase Cloud Storage при загрузке предварительного просмотра загруженного изображения

Я загрузил изображение, используя данные, сгенерированные base64 в react-native-image-picker. Он отлично отображается на консоли 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, как указано здесь: Правильный способ показать изображение, когда Firestorage не работает или Ошибка при загрузке предварительного просмотра в Firestorage для iOS, но без разницы.


react-native firebase javascript firebase-storage react-native-image-picker
person Qrow Saki    schedule 09.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, есть несколько ошибок, связанных с методом putString base64 в firebase и встроенным в реакцию: см. Этот поток: 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();
  })
}

Обязательно добавьте данные: image / jpeg; base64,9asdf92349 ... если их там нет. Я использовал response-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'));
    });
person Qrow Saki    schedule 10.10.2020