web-dev-qa-db-ja.com

AngularFire2-FirebaseストレージgetDownloadURL（）-FirestoreのURLを返す方法

私はangularfire2のドキュメントを調べて、downloadURlをストレージから取得しています。ここに簡単なものが欠けているといいのですが。

ドキュメントは述べています：

@Component({
  selector: 'app-root',
  template: `<img [src]="profileUrl | async" />`
})
 export class AppComponent {
   profileUrl: Observable<string | null>;
   constructor(private storage: AngularFireStorage) {
   const ref = this.storage.ref('users/davideast.jpg');
   this.profileUrl = ref.getDownloadURL();
 }
}

ただし、画像をアップロードしたら、ダウンロードURLを文字列として返し、firestoreにアップロードします。外部サービスのダウンロードURLが必要です。

私の機能

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata).then(() => {

    var downloadURL = ref.getDownloadURL();

  })

}

これにより、画像が完全にアップロードされます。ただし、ダウンロードURLをfirestoreに書き込みたいと思います。コンソールが 'downloadURL'変数をログに記録すると、次のようになります。

PromiseObservable {_isScalar：false、promise：y、scheduler：undefined}

ダウンロードはpromise observableの内部にあります。変数としてダウンロードURL文字列を取得するにはどうすればよいですか？それができたら、firestoreの更新を分類できます。

firebasefirebase-storageangularfire2
6
ETX

この回答はFirebase 5.0リリースからは関係ありません。アップロードタスクからdownloadURL（）が削除されました。doc を参照してください。

アップロードが完了すると、.downloadURL()オブザーバブルはダウンロードURL文字列を発行します。次に、値を取得するためにサブスクライブする必要があります。

uploadImage(base64data) {

  const filePath = (`myURL/photo.jpg`);
  //const storageRef = firebase.storage().ref();

  var metadata = {
    contentType: 'image',
    cacheControl: "public, max-age=31536000",
  };

  const ref = this.storage.ref(filePath);
  const task = ref.putString(base64data, 'data_url', metadata);
  const downloadURL = task.downloadURL();

  downloadURL.subscribe(url=>{
     if(url){
         console.log(url);
         //wirte the url to firestore
     }
  })

}

お役に立てれば。詳細については、このブログをチェックしてください 詳細

2
Hareesh
//observable to store download url
downloadURL: Observable<string>;

task.snapshotChanges().pipe(
    finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        this.downloadURL.subscribe(url=>{this.imageUrl = url})
    })
)

参照： https://github.com/ReactiveX/rxjs/blob/master/doc/observable.md

7
Senthil kumar

.downloadURL()はもう機能しません。.getDownloadURL()とfinalize()を組み合わせて使用​​する必要があります。

。htmlファイル

<input type="file" (change)="uploadFile($event)">

。tsファイル

import {
  AngularFireStorage,
  AngularFireStorageReference,
  AngularFireUploadTask
} from '@angular/fire/storage';
import { Component } from '@angular/core';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent {
    constructor(private angularFireStorage: AngularFireStorage) {}

    public uploadFile(event: any): void {
        for (let i = 0; i < event.target.files.length; i++) {
            const file = event.target.files[i];
            const fileRef: AngularFireStorageReference = this.angularFireStorage.ref(
              file.name
            );
            const task: AngularFireUploadTask = this.angularFireStorage.upload(
              file.name,
              file
            );
            task
                .snapshotChanges()
                .pipe(
                finalize(() => {
                    fileRef.getDownloadURL().subscribe(downloadURL => {
                        console.log(downloadURL);
                    });
              })
          )
          .subscribe();
       }
   }
}

また、@ angular/fireに注意してください。これは、すべてのAngularFire2パッケージが@ angular/fireに移動するためであり、これが推奨される使用方法ですこれから。

1
Daniel Danielecki

サブスクリプションのネストはアンチパターンなので、finalizeでサブスクライブする代わりに、last + switchMapまたはconcat + deferを使用する必要があります。

last + switchMap

task.snapshotChanges().pipe(
  last(),
  switchMap(() => fileRef.getDownloadURL())
).subscribe(url => this.imageUrl = url)

連結+延期

concat(
  task.snapshotChanges().pipe(ignoreElements()),
  defer(() => fileRef.getDownloadURL())
).subscribe(url => this.imageUrl = url)
0
fridoo