Проблема при попытке создать AngularFireStorageReference с помощью переменной - PullRequest
Новая
       26

Проблема при попытке создать AngularFireStorageReference с помощью переменной

0 голосов
/ 16 ноября 2018

При создании ссылки на хранилище с использованием приведенного ниже примера кода у меня нет проблем.Однако, когда я заменяю «1234» на this.id, я получаю следующую проблему на скриншоте.Как это исправить?Вся документация, которую я прочитал онлайн, указывает, что это должно работать. 

export class NewListComponent implements OnInit {

uploadPercent: Observable<number>;
downloadURL: Observable<string>;
uploadProgress: Observable<number>;
ref: AngularFireStorageReference;
task: AngularFireUploadTask;
uploadState: Observable<string>;
id:string;
imgObsArray: Observable<string>[] = new Array();

  constructor(private afStorage: AngularFireStorage) {

  }

  ngOnInit() {
  }


uploadFile(event) {

this.id = Math.random().toString(36).substring(2);
this.ref = this.afStorage.ref("1234");
this.task = this.ref.put(event.target.files[0]);
this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));
this.uploadProgress = this.task.percentageChanges();

  this.ref.getDownloadURL()
  .subscribe(avatarUrl => {
      this.downloadURL = avatarUrl
      this.imgObsArray.push(this.downloadURL)
     console.log(avatarUrl + " This is the avatarUrl " + this.downloadURL + " This is the downloadURL ");
  }, (error) => {
     console.error(error);
  });

}

}

Ошибка

enter image description here

ОБНОВЛЕННЫЙ КОД НА ОСНОВЕ ОБРАТНОЙ СВЯЗИ 

uploadFile(event) {
const id = Math.random().toString(36).substring(2);

console.log(id + " THIS IS THE RANDOM ID")

this.ref = this.afStorage.ref(id);

this.task = this.ref.put(event.target.files[0]);

this.uploadState = this.task.snapshotChanges().pipe(map(s => s.state));

this.uploadProgress = this.task.percentageChanges(); 

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

this.downloadURL.pipe(
    filter( url => url !== undefined),
    tap(avatarUrl => { this.imgObsArray.push(avatarUrl),
    console.log(avatarUrl + " This is the avatarUrl " + avatarUrl + " This is the downloadURL "); }),
    catchError( error => { 
    console.error(error); 
    return Observable.throw(error);}
)).subscribe();

}

enter image description here

1 Ответ

0 голосов
/ 19 ноября 2018

Добавляя в качестве ответа, вы должны получить downloadUrl для завершения изменений снимка, как указано в документах хранилища.Чтобы устранить ошибку канала, лучше переместить подписку this.downloadUrl в ngOnInit.

PS: После дальнейшего обсуждения кажется, что ref.getDownloadUrl может первоначально вернуть ноль.

...