可以通过监听HttpEventType.UploadProgress事件来获取上传进度,并通过计算文件大小和上传进度的比例来更新页面上的进度条。示例代码如下:
import { HttpClient, HttpEventType } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UploadService {
constructor(private http: HttpClient) { }
uploadFile(file: File) {
const formData = new FormData();
formData.append('file', file);
return this.http.post('/api/upload', formData, {
reportProgress: true,
observe: 'events'
}).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
// 计算上传进度的百分比
const percentDone = Math.round(100 * event.loaded / event.total);
// 更新页面上的进度条
// ...
} else if (event.type === HttpEventType.Response) {
console.log(event.body);
}
});
}
}