当前位置：Gxlcms > 数据库问题 > [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

[Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

时间：2021-07-01 10:21:17 帮助过：21人阅读

service: import { Injectable } from ‘@angular/core‘; import { Observable } from ‘rxjs/Observable‘; import { HttpClient, HttpRequest, HttpEvent } from ‘@angular/common/http‘; export interface Person { name: string; } @Injectable() export class PeopleService { constructor(private http: HttpClient) {} uploadAvatar(data): Observable<HttpEvent<Object>> { const req = new HttpRequest( ‘POST‘, ‘https://reqres.in/api/users/1‘, data, { reportProgress: true } ); return this.http.request(req); } }

// Component
  import { HttpClient, HttpRequest, HttpEvent, HttpEventType } from ‘@angular/common/http‘;


  uploadAvatar(fileUpload) {
    const formData = new FormData();
    formData.append(‘avatar‘, fileUpload.files[0], ‘avatar.jpg‘);

    this.peopleService
      .uploadAvatar(formData)
      .subscribe(res => {
        if (res.type === HttpEventType.UploadProgress) {
          const percentage = Math.round(100 * res.loaded / res.total);

          this.output = `File is ${percentage}% uploaded`;
        } else if (res instanceof HttpResponse) {
          this.output = `File is completely uploaded`;
        }
      });

  }

标签：rom from hat int tar ide ack users ota

[Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

人气教程排行