zoukankan      html  css  js  c++  java
  • [Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object

    In some cases your application might need to upload large amounts of data, such as files. Obviously for a good UX we should provide the user some feedback on the progress of the upload. Angular’s HttpRequest object has a property reportProgress which allows us to do exactly that. Let’s see how.

    // 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`;
            }
          });
    
      }

  • 相关阅读:
    地图篇-02.地理编码
    地图篇-01.获取用户位置
    新手教程之使用Xib自定义UITableViewCell
    封装
    NSDate简单介绍
    OC知识点归纳
    Xcode的控制台调试命令
    [开发笔记]UIApplication介绍
    技术分享-开发利器block底层实现
    技术分享-开发利器block
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8448909.html
Copyright © 2011-2022 走看看