web-dev-qa-db-ja.com

Firebaseストレージへの画像のアップロードが成功した後、FirebaseはダウンロードURLを取得します

単一の画像をFirebase Storageにアップロードし、そのダウンロード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を取得しようとしましたが、エラーが発生し続けます。 this.image変数に割り当て、別の関数を使用してデータベースに保存できるように、URLを取得しようとしています。

javascriptangularfirebasefirebase-realtime-databasefirebase-storage
14
Brian Revie

APIが変更されました。次を使用してdownloadURLを取得します

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

私はこれを理解し、それが機能しているようだと思います、私はスナップショットからdownloadURLを取得し、それをthis.imageに割り当てる必要があることに気づきました：

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関数のスナップショットを使用して、次のように変数image：anyをスナップショットdownloadURLに割り当てました。

this.image = snapshot.downloadURL;

これが他の誰かを助けることを願っています！

5
Brian Revie

2019年、私は次の関数を使用して、firebaseに新しく保存されたファイルのURLにアクセスしました。

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)
    })
  })
}
2
duhaime