Expo / Firebase: изображение, выбранное из рулона камеры, загружаемое как поток октетов вместо .jpg - PullRequest
Новая
       54

Expo / Firebase: изображение, выбранное из рулона камеры, загружаемое как поток октетов вместо .jpg

0 голосов
/ 03 февраля 2019

У меня возникли проблемы с просмотром файлов изображений, которые я загрузил в firebase, и только что заметил, что проблема связана с типом файлов в firebase.

enter image description here

Два файла в моей консоли хранения Firebase.Один загружен из моего симулятора IOS (octet-stream), а другой загружен непосредственно в консоль из браузера, который загружает правильно и доступен для просмотра.

Вот мои функции выбора и загрузки: 

_selectPhoto = async () => {

    const status = await getPermission(Permissions.CAMERA_ROLL);
    if (status) {
      let imageName = "pic"
      const result = await ImagePicker.launchImageLibraryAsync(options);
      if (!result.cancelled) {
        Animated.timing(this.animatedWidth, {
          toValue: 600,
          duration: 15000
      }).start()
        this.uploadImage(result.uri, imageName)
        .then(() => {
        this.props.navigation.navigate('Profile')
        })        
        .catch((error) => {
          Alert.alert('Must Sign In');
          this.props.navigation.navigate('Login')
          console.log(error);

        })
      }
    }


  };


uploadImage = async (uri, imageName) => {

    const user = firebase.auth().currentUser;
    const response = await fetch(uri);
    const blob = await response.blob();
    let storageRef = firebase.storage().ref().child(''images/'+user.displayName+'/'+imageName+'.jpg'');

    const snapshot = await storageRef.put(blob);
    blob.close();
    snapshot.ref.getDownloadURL().then(function(downloadURL) {
      console.log("File available at", downloadURL);
      user.updateProfile({
        photoURL: downloadURL.toString(),
        }).then(function() {
            console.log('saved photo')

        }).catch(function(error) {
            console.log('failed photo')

        });

    });

}

Когда я получаю ссылку в своей консоли, она также содержит носитель и токен:

... .appspot.com / o / profile-pic.jpg? Alt = media & token = 56eb9c36-b5cd-4dbb-bec1-3ea5c3a74bdd

Если я CMD + клик в VS Code, я получаю ошибку: 

{
  error: {
    code: 400,
    message: "Invalid HTTP method/URL pair."
  }
}

Естественно, когда я помещаю эту ссылку в браузер, он загружаетфайл с таким именем, но в нем указано:

Файл «pic.jpg» не может быть открыт.Возможно, он поврежден или использует формат файла, который Preview не распознает.

Возможно, это может быть что-то с mediaTypes, но я не совсем уверен, как его использовать.

mediaTypes: String - Выберите, какой тип носителя выбрать.Использование: ImagePicker.MediaTypeOptions., Где одно из: Изображения, Видео, Все.

Спасибо!

1 Ответ

0 голосов
/ 07 марта 2019

Я боролся с этой же проблемой последние несколько дней.Я наконец смог получить изображения для загрузки и рендеринга, как и ожидалось, следуя примеру Firebase Upload в репо Expo .Я не до конца понимаю, почему это работает, но похоже, что Firebase не нравится BLOB-объект, сгенерированный

const blob = await response.blob();

Попробуйте заменить вышеприведенное на: 

const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
      resolve(xhr.response);
    };
    xhr.onerror = function(e) {
      console.log(e);
      reject(new TypeError('Network request failed'));
    };
    xhr.responseType = 'blob';
    xhr.open('GET', uri, true);
    xhr.send(null);
  });
...