angular - HttpRequest 和 reportProgress 不起作用或弄乱了我的请求

Question

我正在使用 Angular 5 实现文件上传服务，我想就上传进度向用户提供一些反馈。我发现有几个页面建议使用 Angulars HttpClient 附带的 reportProgress 参数，但我无法让它工作。

我为我的所有 http 请求使用一个包装类，然后它执行一些逻辑，最后所有请求都以被调用的相同方法结束:

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(request.method, request.url, {
    body: request.body,
    headers: request.headers,
    responseType: request.responseType,
    ...options
  });
}

然后我将上传(发布)调用传递给它，使用 { reportProgress: true } 作为 options。这根本不起作用，请求上没有任何改变。所以我怀疑，我实际上需要在 HttpRequest 构造函数中使用 reportProgress 参数来使其工作并相应地更改我的代码:

public request(request: HttpRequest<any>, options?: any): Observable<any> {
  return this.httpClient.request(
    new HttpRequest(request.method, request.url, request.body, {
      headers: request.headers,
      responseType: request.responseType,
      ...options
    })
  );
}

这导致了更奇怪的行为，现在无论我的选项是什么样的，我总是只收到 {type: 0} 作为请求的响应。

我在监督什么？我使用的是 Angular 5.1.1，现在我真的有点困惑。

所以举一个明确的例子，现在我收到了这两个 HttpRequests 的相同响应:

{  
  "url":"http://127.0.0.1:8888/test",
  "body":{  
   "data":"testdata"
  },
  "reportProgress":false,
  "withCredentials":false,
  "responseType":"json",
  "method":"POST",
  "headers":{ some-headers ... }
}

和这个请求:

{  
  "url":"http://127.0.0.1:8888/api/pages",
  "body":{  
    "pageUrl":"http://localhost:1234/"
  },
  "reportProgress":true,
  "withCredentials":false,
  "responseType":"json",
  "method":"POST",
  "headers":{ some-headers ... }
}

Answer 1

与 {reportProgress: true} 一起，您需要发送 {observe:“事件”

this.httpClient.post(environment.uploadDocument, file, { reportProgress: true, observe: 'events' })
.subcribe(data =>{
if (data['type'] === HttpEventType.UploadProgress) {
   console.log('loaded ', data['loaded'], '   total  -', data['total']);
   }
})