Firebase получает URL-адрес загрузки после успешной загрузки изображения в хранилище firebase

Я пытаюсь загрузить одно изображение в хранилище Firebase, а затем захватить его URL-адрес загрузки и назначить его переменной.

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

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {
        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).push({ path: path, filename: selectedFile.name })
      });
    }

    // This part does not work
    iRef.getDownloadURL().then((url) => {this.image = url});
    console.log('IREF IS ' + iRef)
    console.log('IMAGEURL IS ' + this.image)

  }

Журналы консоли следующие:

    IREF IS gs://my-app-159520.appspot.com/images/Screen Shot 2017-08-14 at 12.19.01.png
    view-order.component.ts:134 IMAGEURL IS undefined
Uploaded a blob or file! Now storing the reference at /images/images/

Я пытаюсь использовать ссылку iRef для захвата загружаемого URL-адреса, но я продолжаю получать ошибки. Я пытаюсь захватить URL-адрес, поэтому я могу назначить его переменной this.image, а затем сохранить его в своей базе данных с помощью другой функции.

Ответ 1

API изменился. Используйте следующее, чтобы получить downloadURL

  snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log("File available at", downloadURL);
  });

Ответ 2

Я думаю, что я понял это и, похоже, работает, я понял, что мне нужно захватить downloadURL из моментального снимка и назначить его этому типу. Например:

upload() {
    let storageRef = firebase.storage().ref();
    let success = false;

    for (let selectedFile of [(<HTMLInputElement>document.getElementById('file')).files[0]]) {
      let router = this.router;
      let af = this.af;
      let folder = this.folder;
      let path = `/${this.folder}/${selectedFile.name}`;
      var iRef = storageRef.child(path);
      iRef.put(selectedFile).then((snapshot) => {

        // added this part which as grabbed the download url from the pushed snapshot
        this.image = snapshot.downloadURL;

        console.log('Uploaded a blob or file! Now storing the reference at', `/${this.folder}/images/`);
        af.list(`/${folder}/images/`).push({ path: path, filename: selectedFile.name })

        console.log('DOWNLOAD URL IS ' + this.image)
      });
    }

  }

Затем я запустил другую функцию, чтобы добавить URL-адрес в базу данных, и он прошел нормально, если это ожидалось!

Итак, я загрузил изображение в базу данных, а затем используя моментальный снимок из функции put, я тогда присвоил свой образ переменной: любой для моментального снимка downloadURL, например:

this.image = snapshot.downloadURL;

Надеюсь, это поможет кому-то другому!

Ответ 3

В 2019 году я получил доступ к URL-адресу недавно сохраненного файла в firebase со следующей функцией:

const uploadImage = async(uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  // child arg specifies the name of the image in firebase
  const ref = firebase.storage().ref().child(guid());
  ref.put(blob).then(snapshot => {
    snapshot.ref.getDownloadURL().then(url => {
      console.log(' * new url', url)
    })
  })
}