Как работать с ProgressBar, когда изображение загружается в FireBase

Question

Я загружаю изображение в хранилище Firebase. Но я не могу обработать ProgressBar в моем коде.

Компонент

onSubmit(){
      const fileRef = this.storage.ref(filepath)
      this.storage.upload(filepath,this.selectedImage).snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => {
            this.upSvc.insertImageDetails(this.daydetails.value);
            this.toaster.success("Submitted successfully")
            this.router.navigate(['../Home'],{relativeTo:this.activatedroute})
          })
        }),
      ).subscribe()
}

HTML

<div class="progress">
   <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>
Progress: {{progress}}% Complete

Answer 1

this.storage.upload() возвращает AngularFireUploadTask.У этой задачи есть percentageChanges() наблюдаемая, которая выдаст то, что вам нужно.

Так что-то вроде

uploadProgress$: Observable<number>

onSubmit(){
      const fileRef = this.storage.ref(filepath)
      const task = this.storage.upload(filepath,this.selectedImage)

      this.uploadProgress$ = task.percentageChanges()

      task.snapshotChanges().pipe(
        finalize(() => {
          fileRef.getDownloadURL().subscribe((url) => {
            this.upSvc.insertImageDetails(this.daydetails.value);
            this.toaster.success("Submitted successfully")
            this.router.navigate(['../Home'],{relativeTo:this.activatedroute})
          })
        }),
      ).subscribe()
}

<div class="progress" *ngIf="uploadProgress$ | async as progress">
   <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>

Answer 2

Через Firebase SDK

Вы можете перехватить событие state_changed на узле, в который вы загружаете файл, и затем вызвать snapshotChanges(), чтобы получить данные, необходимые для расчета текущего прогресса загрузки файла. Вот пример

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('File available at', downloadURL);
  });
}); 

Вы можете найти больше информации здесь

Через AngularFire2

Вы можете использовать AngularFireUploadTask, который возвращается upload()

Затем вы можете позвонить percentageChanges(), который является Observable, который излучает процент от прогресса загрузки

uploadProgress:Observable<number>;
uploadTask: any;
onSubmit(){
  const fileRef = this.storage.ref(filepath)            

  this.uploadTask = this.storage.upload(filepath,this.selectedImage).snapshotChanges().pipe(
    finalize(() => {
      fileRef.getDownloadURL().subscribe((url) => {
        this.upSvc.insertImageDetails(this.daydetails.value);
        this.toaster.success("Submitted successfully")
        this.router.navigate(['../Home'],{relativeTo:this.activatedroute})
      })
    })).subscribe()
   this.uploadProgress = this.uploadTask.percentageChanges();
    }

В вашем HTML:

<div class="progress">
   <div class="progress-bar progress-bar-animated" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>

Progress: {{ uploadProgress | async }}% Complete

Вы можете найти больше информации здесь