根据文件上传百分比以角度显示 mat-spinner答案

【问题标题】：To show mat-spinner based upon file upload % in angular根据文件上传百分比以角度显示 mat-spinner
【发布时间】：2019-03-22 12:30:22
【问题描述】：

我正在使用 Azure Blob 存储 执行file upload 操作，现在我可以将文件上传到 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>

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


}

现在我在模板中显示 文件名 和 uploading % 这个：

预期结果：

在模板中调用onFileChange 事件时，我想启用spinner，而当upload % is 100%（即进度为100% 时）我想关闭spinner

【问题讨论】：

标签： angular azure angular-material angular6 azure-blob-storage

【解决方案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

希望这会有所帮助！

【讨论】：

您的解决方案工作正常，但是：1) spinner is not rotating during the upload progress。 2)Spinner should be shown,only during upload progress but it is showing before file upload also
您想要进度微调器或仅在上传文件时显示微调器。我已经更新了解决方案，请检查
更新演示 - stackblitz.com/edit/angular-xcny5a?file=app/…
很高兴能帮上忙！

【解决方案2】：

你需要在uploadToBlobStorage方法中设置你想要监听所有事件的headers。

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

官方 angular 文档中描述了另一种解决方案。

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

【讨论】：