Angular 文件上传进度百分比 [英] Angular file upload progress percentage

问题描述

在我用 Angular 4 开发的应用程序中，用户可以将多部分文件上传到服务器.文件很大.我需要向用户显示文件上传过程的当前进度及其对用户的百分比，我该怎么做?

In my application that i am developing in Angular 4, user can upload multipart files into server. Files are large. I need to show the current progress of file upload process with it's percentage to user, how can i do it?

提前致谢！

推荐答案

这适用于 Angular 9 和 10(注意 observe: 'events')

const headers = new HttpHeaders({
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: token
      }))
const formData = new FormData();
formData.append('file_param_name', file, file.name);

this.httpClient.post(url, formData, {
    headers,
    reportProgress: true,
    observe: 'events'
}).subscribe(resp => {
    if (resp.type === HttpEventType.Response) {
        console.log('Upload complete');
    }
    if (resp.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * resp.loaded / resp.total);
        console.log('Progress ' + percentDone + '%');
    } 
});

这篇关于Angular 文件上传进度百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！