angular - 根据文件上传百分比显示 mat-spinner

Question

我正在使用Azure Blob存储执行文件上传操作，现在我可以将文件上传到Azure Blob，但是在上传时我想要显示的文件 mat-spinner 用户，因为上传需要几秒钟。

下面是组件代码:

HTML

<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}}</pre>
</div>

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%
    };
  }


}

现在我在模板中显示文件名和上传％，例如 这:

预期结果:

正如在模板中一样，当调用 onFileChange 事件时，我想启用 spinner 并且当 upload % 为 100% 时(i,e当进度为 100% 时)我想关闭 spinner

Answer 1

这里需要使用mat-progress-spinner更新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%
    };
  }

<强> Demo on stackblitz

希望这会有所帮助!