Получить url изображений в FireBase, с Angularfire2 - PullRequest
Новая
       6

Получить url изображений в FireBase, с Angularfire2

0 голосов
/ 07 сентября 2018

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

components.ts: 

    import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs';
import { AngularFirestore } from 'angularfire2/firestore';
import { filter, switchMap } from '../../../../node_modules/rxjs/operators';
import { tap } from 'rxjs/operators';





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

  urlImages: string

  // Main task 
  task: AngularFireUploadTask;

  // Progress monitoring
  percentage: Observable<number>;

  snapshot: Observable<any>;

  // Download URL
  downloadURL: Observable<string>;

  // State for dropzone CSS toggling
  isHovering: boolean;
  //variable para obtener url
  image: string

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


  ngOnInit() {
  }



  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') {
      console.error('unsupported file type :( ')
      return;
    }

    // El path del archivo en storage
    const path = `blog/${new Date().getTime()}_${file.name}`;

    // Metadata Personalizada
    const customMetadata = { app: 'CMS DsnAdmin' };

    // Declaramos la tarea
    this.task = this.storage.upload(path, file, { customMetadata })

    // Porcentaje de Carga
    this.percentage = this.task.percentageChanges();
    console.log('Image cargada!');
    this.snapshot = this.task.snapshotChanges()

    // Url del archivo
    const task = this.storage.upload(path, file);
    const ref = this.storage.ref(path);

  }

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

}

Надеюсь, вы мне поможете. Я новичок в этой сети, если вы зададите вопрос неправильно.

1 Ответ

0 голосов
/ 07 сентября 2018

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

downloadURL: Observable<string>;

с помощью finalize() на task.snapshotChanges(), и вы можете получить downloadURL от объекта ref. 

// get notified when the download URL is available
task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = ref.getDownloadURL() )
 )
.subscribe()

Пожалуйста, проверьте больше на: https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

...