angularfire2 Показать изображение после загрузки - PullRequest
Новая
       5

angularfire2 Показать изображение после загрузки

0 голосов
/ 02 июня 2018

Использование примера кода из Пример использования .Я могу успешно загрузить файл изображения и отобразить ссылку на него.Однако я хотел бы отобразить изображение в теге img сразу после его загрузки вместо ссылки на него.Как бы я это сделал?Я пробовал что-то вроде этого безрезультатно: 

  profileUrl: Observable<string | null>;

  ....


  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');

  task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = this.profileUrl = ref.getDownloadURL())
  )
  .subscribe();

И в моем файле шаблона: 

<img [src]="profileUrl | async" />

Все это из примера, но мне нужно объединить Пример использования с разделом Загрузка файлов .

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Я понял это.Вы не можете подписаться на снимок, но вы можете на ссылку для загрузки. 

  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');
  task.snapshotChanges().pipe(
    finalize(() => {
      this.downloadURL = ref.getDownloadURL()
      this.downloadURL.subscribe(url => (this.image = url));
    })
  )
  .subscribe();
0 голосов
/ 03 июня 2018

Я недавно сделал что-то подобное.Моя задача состояла в том, чтобы загрузить изображение и затем отобразить его на той же странице, на которой оно было загружено.Я написал WebAPI на сервере «upload», и в этом примере не используется angular2fire, поэтому в ответе на подписку angular2fire вы обновите связанную переменную до [src].

HTML: 

<img *ngIf="uploaded" [src]="myURL">

TS: 

uploadedImage = "savedNameOfUploadedFile.png";
uploaded = false;
myURL = '';
uploadImage(){
    this._httpClient.post(this.apiEndPoint + '/imageupload', formdata)
    .subscribe(
        data => {
            this.uploaded = true;
            this.myURL = 'http://locationOfFileServer/' + this.uploadedImage;
          },
        error => { console.log(error); }
    );
}

Мой код был намного сложнее, но это урезанная версия для удобства чтения.Я использовал BehaviorSubject для связи со своей службой загрузки и моим компонентом представления, но, как я уже сказал, это упрощенная версия для удобства чтения.Если вам нужно больше подробностей, дайте мне знать, и я скопирую / вставлю свой рабочий код.

...