时间戳

首页 > 解决方案 > 如何访问 Angular 5 中文件上传的 HttpEvent 进度？

angular - 如何访问 Angular 5 中文件上传的 HttpEvent 进度？

问题描述

我已经阅读了 angular.io 文档以及其他关于此的 SO 答案，但是我仍然无法理解如何访问从 Angular 5 到 NodeJS 的 POST 调用的文件上传进度并显示给用户。

这就是我正在做的事情。

//组件代码：body 是包含一个文件和一些其他字段的表单数据。

  this.fileService.uploadtool5(body, this.token).subscribe(res =>{

        if(res.success){
          //do something server has received post data
        }
      },(err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
              // A client-side or network error occurred. Handle it accordingly.
              //console.log('An error occurred:', err.error.message);
              //console.log('Status', err.status);
             // this.signupfailreasonstatus = err.status;
            } else {
              // The backend returned an unsuccessful response code.
              // The response body may contain clues as to what went wrong,
              //console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
              //console.log('Status', err.status);
            }
      });

//我有一个响应对象的拦截器，看起来像这样。

export interface Tool9Response {
  success: boolean;
  message: string;
}

//文件服务代码

uploadtool5( payload, token ) : Observable<Tool9Response>{
       const httpOptions = {
         headers: new HttpHeaders({
           'Authorization': token
         })
       };
       return this.http.post<Tool9Response>(this._baseURL + 'appsecuritydesign', payload, httpOptions);

   }

我上传的大多数文件都是 100+ MB 来处理，所以上传需要时间，我想显示上传进度。如何在不更改当前将数据发布到服务器的方式的情况下访问文件上传的 HttpEvent 进度？

标签： angular

解决方案

在您的文件服务代码中：

uploadtool5( payload, token ) : Observable<any> { // Assuming `payload` is FormData 

    const headers = new HttpHeaders({
       'Authorization': token
     })


   const req = new HttpRequest(
        'POST',      
         this._baseURL + 'appsecuritydesign', 
         payload, 
         { 
            headers:headers,
            reportProgress: true //This is required for track upload process
         }
   );

   return this.http.request(req);
 }

// 零件

this.fileService.uploadtool5(body, this.token).subscribe((event: HttpEvent<any>) => {

   if (event.type == HttpEventType.UploadProgress)
   {
     console.log("Loading: "+ event.loaded / (event.total || event.loaded) * 100 + '%');
   }
   if (event.type == HttpEventType.Response) {
     console.log("response:", event);
    /*success and message fields from the response can be accessed 
      here like this*/
     console.log("response:", event);
     console.log("body:", event.body);
     console.log("success:", event.body.success);
     console.log("message:", event.body.message);
   }


  });

推荐阅读