[Angular] Provide Feedback to Progress Events with Angular’s HttpRequest Object
Angular to with object Events progress provide
2023-09-14 09:00:50 时间
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`; } }); }
相关文章
- 一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
- angular框架如何实现父子组件传值、非父子组件传值
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- Angular HTTPClient 发送请求的触发方式讨论
- 前端面试题angular_Vue前端面试题
- 关于 Angular 开发时对主流浏览器支持的话题
- 关于 Angular 编程中的 shim 概念
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- ECC TO HANA FAGLB03 search-help on Account Number field doesn’t working or not returning the selected value to the Account Number field.详解编程语言
- Web 前端框架:Angular 4.0.0 正式版发布
- Angular 2对 React:究竟孰优孰劣?
- 利用Oracle TO函数实现数据转换(oracle to_函数)
- angular简介和其特点介绍