Загрузка в Firebase Storage выполняется, но изображение возвращается в виде черного квадрата.Все перепробовал

Question

Привет, я собирал полноценное приложение Tinder с использованием команды native native + firebase auth / storage / realtimedb.

Пока все шло отлично, но я столкнулся с проблемойдней назад, и я не знаю, что с ним не так.

Я возвращаю правильный URI изображения и передаю его в качестве параметров в функцию uploadImage и преобразую это в BLOB-объект.Он загружает файл в хранилище Firebase, но это не мое изображение.Это то, что загружается:

Изображение, которое загружается.

Странные вещи происходят в описании файла моего «изображения»

Первое, что я замечаю, - это когда я загружаю изображение и смотрю описание предполагаемого изображения, я вижу, что его размер составляет 600 000 байт, что странно, потому что, когда я загружаю изображения вручную через консоль Firebase, онинесколько мегабайт.

Во-вторых, предварительный просмотр изображения не работает.

editAvi = async () => {
      console.log('wtf')
        await Permissions.askAsync(Permissions.CAMERA_ROLL);
        const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync({
          allowsEditing: true,
        });
        if (!cancelled) {
          this.setState({ image: uri });
  }
        console.log('The image is' + this.state.image)
      };
  uploadImage = async (uri, imageName) => {
    // Create file metadata including the content type
    var metadata = {
      contentType: 'image/jpeg',
    }
    // Points to the root reference

    var storageRef = firebase.storage().ref();

    // Points to 'images'
    const response = await fetch(uri);
    const blob = await response.blob();

    var ref = storageRef.child('images/' + this.state.currentID);
    ref.put(uri, metadata);
      console.log('This is the blob: ' + blob)
  }

Я интенсивно исследовал это в течение двух дней и неоднократно спрашивал об этом в разногласиях по веб-разработке.м, и я до сих пор не могу это исправить.

Пожалуйста, помогите мне исправить это!Это одна из последних вещей, которые мне нужны, чтобы сделать это приложение.:)

Answer 1

Нашел этот вопрос, когда я тоже искал ответ.Я смог решить эту проблему, следуя рекомендации из выпуска Github https://github.com/expo/expo/issues/2402#issuecomment-443726662

Основная идея - заменить

const response = await fetch(uri);
const blob = await response.blob();
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(uri, metadata);

на

const blob = await new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = () => {
                resolve(xhr.response);
            };
            xhr.onerror = (e) => {
                reject(new TypeError("Network request failed"));
            };
            xhr.responseType = "blob";
            xhr.open("GET", uri, true);
            xhr.send(null);
        });
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(blob, metadata);

Узнайте, что у вас есть проблема в ReacNative при использовании Expo.

Надеюсь, это решит эту проблему.

Answer 2

Нашел этот вопрос, когда искал решение той же проблемы.Я исправил это примерно после 12 часов проб и ошибок, добавив 'application / octet-stream; BASE64' a тип при создании большого двоичного объекта (используя rn-fetch-blob).

Blob.build (data,{type: 'application / octet-stream; BASE64'});

Не уверен, что этот метод используется для создания большого двоичного объекта, но если это так, то использование этого типа в качестве типа решило проблему для меня.