AngularFire2-在String中获取下载URL Firebase存储

时间:2018-10-07 02:06:01

标签: angular firebase-storage angularfire2

我正在使用什么

AngularFire2 消防员 Angular v 6

我要做什么

获取每个上传图片的下载URL字符串

问题

我得到一个Observable,但是我需要String中的值才能发送给API

观察

我不需要Observable并且使用了异步管道来查看URL,我需要将String中的URL发送给API。

组件TS

import { Component, OnInit } from '@angular/core';
import { FaceApiService } from '../../services/face-api.service';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs';
import { AngularFirestore } from 'angularfire2/firestore';
import { tap, finalize } from 'rxjs/operators';

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

  public imgUrl: String;

  public dataApi: any;

  // Main Task
  task: AngularFireUploadTask;

  // Progress monitoring
  percentage: Observable<number>;

  snapshot: Observable<any>;

  // Dowload URL
  public downloadURL: Observable<string>;

  // State for dropzone CSS toggling
  isHovering: boolean;

  // unsupported file
  unsupportedFile = '';

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

  // Get URL for API
  sendUrl(imgUrl) {

      this.data.getApiData(imgUrl).subscribe( data => {
        this.dataApi = {
          'imgUrl': imgUrl,
          'dataApi': data
        };
      });
    }

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

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

    // Client-side validation example
    if (file.type.split('/')[0] !== 'image') {
      this.unsupportedFile = 'Archivo no soportado';
      console.error('unsupported file type :( ');
      return;
    }

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

    // Totally optional metadata
    const customMetadata = { Caronte: 'De Colombia con amor' };

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

    // Progress monitoring
    this.percentage = this.task.percentageChanges();
    this.snapshot = this.task.snapshotChanges();

    // Download URL file
    this.snapshot.pipe(finalize(() => {
      this.downloadURL = this.storage.ref(path).getDownloadURL();
      console.log(this.downloadURL); // Get a Observable
    }) ).subscribe();

    this.downloadURL.subscribe( url => {
      if (url) {
        console.log(url);
      }

    } );

    // AFS
    this.snapshot = this.task.snapshotChanges().pipe(
      tap(snap => {
        if (snap.bytesTransferred === snap.totalBytes) {

          // Update firestore on completion
          this.db.collection('photos').add( {path, size: snap.totalBytes });
        }
      })
    );
  }

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

  ngOnInit() {}

}

这很重要

// Download URL file
    this.snapshot.pipe(finalize(() => {
      this.downloadURL = this.storage.ref(path).getDownloadURL();
      console.log(this.downloadURL); // Get a Observable
    }) ).subscribe();

Log of var downloadURL

更新

ERROR TypeError: Cannot read property 'subscribe'

0 个答案:

没有答案