Angular 6 中 ng2-file-upload 的进度条答案

【问题标题】：Progress Bar in ng2-file-upload in Angular 6Angular 6 中 ng2-file-upload 的进度条
【发布时间】：2018-08-10 05:06:12
【问题描述】：

我想为我的文件上传创建一个进度条。

我正在使用的上传是：https://www.npmjs.com/package/ng2-file-upload.

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <input type="file" name="myFile" ng2FileSelect [uploader]="uploader" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                Upload an Image
            </button>
        </div>
    </div>
</div>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';

const URL = 'url to API';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'myFile' });

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log('ImageUpload:uploaded:', item, status, response);
      alert('File uploaded successfully');
    };
 }
}

一切正常，但我想放一个进度条，只有这个。

【问题讨论】：

标签： angular progress-bar ng2-file-upload

【解决方案1】：

您可以在这里收听进度

this.uploader.onProgressItem = (progress: any) => {
    console.log(progress['progress']);
};

【讨论】：

非常好。非常明确的答案，我理解。但 Onprogress 意味着发布/上传的时刻。我试图保持和控制进度，直到收到来自上传和处理文件的 API 的响应。我正在使用您的类型来进行进度的第一部分加上 onSuccessItem code: ` this.uploader.onProgressItem = (progress: any) => { console.log(progress['progress']); }; this.uploader.onSuccessItem = (progress: any) => { console.log('我收到了在 API 中发布的响应文件'); };` 你能看到更多的表格来了解这两种方法之间的进展吗？
酷！如果这有帮助，请帮助获得积分。请标记接受并投票

【解决方案2】：

在您的app.component.html 中包含：

<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>

【讨论】：