Чтобы показать спиннер, основанный на% загрузки файла в угловых

Question

Я выполняю file upload операцию с использованием хранилища BLOB-объектов Azure , теперь я могу загрузить файл в BLOB-объект Azure , но при загрузке файла я хочу показать mat-spinner пользователю, так как загрузка занимает несколько секунд.

Ниже приведен код компонентов:

HTML

<code><img src="{{Url+storageToken}}" height="100px" width="100px">
<input type="file" (change)="onFileChange($event)" >
<mat-spinner></mat-spinner>
<div *ngIf="filesSelected">
  <pre>{{uploadProgress$ | async | json}}

TS

import { Component } from '@angular/core';
import { from, Observable } from 'rxjs';
import { combineAll, map } from 'rxjs/operators';
import { BlobService } from './az-storage/blob.service';
import { ISasToken } from './az-storage/azure.storage';

interface IUploadProgress {
  filename: string;
  progress: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  uploadProgress$: Observable<IUploadProgress[]>;
  filesSelected = false;
  Url: string;
  fileName: string;
  storageToken: string = '......storageAccessToken................';

  constructor(private blobStorage: BlobService) {}

  onFileChange(event: any): void {
    this.filesSelected = true;

    this.uploadProgress$ = from(event.target.files as FileList).pipe(
      map(file => this.uploadFile(file)),
      combineAll()
    );
    console.log(File);
  }

  uploadFile(file: File): Observable<IUploadProgress> {
    const accessToken: ISasToken = {
      container: 'upload-demo',
      filename: 'users/' + file.name,
      storageAccessToken:
        '......storageAccessToken................',
      storageUri: 'https://file-upload.blob.core.windows.net/'
    };

    this.fileName = file.name;
    this.Url = `https://file-upload.blob.core.windows.net/upload-demo/users/${this.fileName}`;

    return this.blobStorage
      .uploadToBlobStorage(accessToken, file)
      .pipe(map(progress => this.mapProgress(file, progress)));
  }

  private mapProgress(file: File, progress: number): IUploadProgress {
    return {
      filename: file.name,
      progress: progress <================ When it becomes 100%
    };
  }


}

Теперь я показываю имя файла и upload% в шаблоне, как это:

Ожидаемый результат:

Как в шаблоне, когда событие onFileChangeя хочу включить spinner и когда upload % is 100% (то есть, когда прогресс равен 100%) я хочу закрыть spinner

Answer 1

Здесь вам нужно использовать mat-progress-spinner обновление загрузки файла в спиннер.

Пример -

your.component.html

<div *ngIf="uploadProgress !==0 &&  uploadProgress !== 100" >
     <mat-progress-spinner class="example-margin" 
         [color]="color" [mode]="mode" [value]="uploadProgress">
    </mat-progress-spinner>
</div>

<div *ngIf="uploadProgress === 100" >
  <h1>File  upload successfully!</h1>
</div>

your.component.ts

uploadProgress = 0; // declare class level variable
...

private mapProgress(file: File, progress: number): IUploadProgress {
    this.uploadProgress = progress;// updating progresss of mat-spinner
    return {
      filename: file.name,
      progress: progress <================ When it becomes 100%
    };
  }

Демонстрация по стеку

Надеюсь, это поможет!

Answer 2

Вам нужно указать в заголовках, что вы хотите прослушивать все события в методе uploadToBlobStorage.

const req = new HttpRequest('POST', '/upload/file', file, {
  observe: 'events', (default is 'response')
});

Вы получите каждое событие, которое происходит в этом вызове обмена данными.

enum HttpEventType {
  Sent
  UploadProgress
  ResponseHeader
  DownloadProgress
  Response
  User
}

https://angular.io/api/common/http/HttpEventType

Другое официальное решение описано в официальных угловых документах.

https://angular.io/guide/http#listening-to-progress-events