angular - 如何在 Angular 中使用 HttpProgressEvent 接口(interface)？

Question

此处的 API 与 Angular 文档中的相同。但是没有一个例子。我想知道如何使用它。最好有例子。

interface HttpProgressEvent { 
  type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress
  loaded: number
  total?: number
}

Answer 1

官方文档中有一个例子。看看这个:

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true
});

// The `HttpClient.request` API produces a raw event stream
// which includes start (sent), progress, and response events.
return this.http.request(req).pipe(
  map(event => this.getEventMessage(event, file)),
  tap(message => this.showProgress(message)),
  last(), // return last (completed) message to caller
  catchError(this.handleError(file))
);


/** Return distinct message for sent, upload progress, & response events */
private getEventMessage(event: HttpEvent<any>, file: File) {
  switch (event.type) {
    case HttpEventType.Sent:
      return `Uploading file "${file.name}" of size ${file.size}.`;

    case HttpEventType.UploadProgress:
      // Compute and show the % done:
      const percentDone = Math.round(100 * event.loaded / event.total);
      return `File "${file.name}" is ${percentDone}% uploaded.`;

    case HttpEventType.Response:
      return `File "${file.name}" was completely uploaded!`;

    default:
      return `File "${file.name}" surprising upload event: ${event.type}.`;
  }
}

Docs