时间戳

首页 > 解决方案 > 根据文件上传百分比以角度显示 mat-spinner

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

问题描述

我正在file upload使用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 % is 100%（即当进度为 100% 时）我想关闭spinner

标签： angularazureangular-materialangular6azure-blob-storage

解决方案

这里需要mat-progress-spinner在 spinner 中使用更新文件上传进度。

例子 -

你的.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>

你的.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%
    };
  }

stackblitz 上的演示

希望这会有所帮助！

推荐阅读