Получение URL для загрузки и сделать его доступным для других компонентов

Question

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

Я пытался использовать его после finalize (), чтобы добавить его, но у меня возникали некоторые новые проблемы

import { Component, OnInit } from '@angular/core';
import {AngularFireUploadTask, AngularFireStorage} from '@angular/fire/storage';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { tap, finalize } from 'rxjs/operators';

@Component({
  selector: 'app-upload-page',
  templateUrl: './upload-page.component.html',
  styleUrls: ['./upload-page.component.css']
})
export class UploadPageComponent implements OnInit {

 task: AngularFireUploadTask;

  // Progress monitoring
  percentage: Observable<number>;

  snapshot: Observable<any>;

  // Download URL
  downloadURL: Observable<string>;

  // State for dropzone CSS toggling
  isHovering: boolean;

  constructor(
    private storage: AngularFireStorage,
    private db: AngularFirestore
  ) {}

  toggleHover(event: boolean) {
    this.isHovering = event;

  }

  startUpload(event: FileList) {
    // The File object
    const file = event.item(0);

    // The storage path
    const path = `documents/${new Date().getTime()}_${file.name}`;

    // metadata
    const customMetadata = { app: 'LKMData in '+ file.type+ ' Format' };

    // The main task
    this.task = this.storage.upload(path, file, { customMetadata });

    // Progress monitoring
    this.percentage = this.task.percentageChanges();
    this.snapshot = this.task.snapshotChanges().pipe(
      tap(snap => {
        if (snap.bytesTransferred === snap.totalBytes) {
          // Update firestore on completion
          this.db.collection('documents').add({ path, size: snap.totalBytes});
        }
      }),
       finalize(() => this.downloadURL = this.storage.ref(path).getDownloadURL())
    );

  }

  // Determines if the upload task is active
  isActive(snapshot) {
    return (
      snapshot.state === 'running' &&
      snapshot.bytesTransferred < snapshot.totalBytes
    );
  }

  ngOnInit() {
  }

}

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

Answer 1

Метод StorageReference.getDownloadURL() является асинхронным. URL загрузки доступен только после завершения вызова.

Итак:

this.storage.ref(path).getDownloadURL().then((url) => {
  this.downloadURL = url;
});

Также см .:

• Ionic 4 - Firebase - Хранилище не отправляет данные в базу данных реального времени (и связанные с ней)