我正在使用 Angular 5 实现文件上传服务，我想为用户提供一些关于上传进度的反馈。我发现有几个页面建议使用 AngularsHttpClient附带的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，我现在真的有点困惑。
所以举一个明确的例子，现在我收到这两个 HttpRequest 的相同响应：
{
"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 ... }
}
连同 {reportProgress： true} 你需要发送 {observe： 'events'}
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']);
}
})
此方法可能会有所帮助
public progress: number = 0;
public message: string = "";
constructor(private http: HttpClient) {}
onSubmit() {
// replace with your request data
const formModel = this.userForm.value;
let formData = new FormData();
formData.append("upload", formModel.upload);
const uploadReq = new HttpRequest('POST', 'api/Upload', formData, {
reportProgress: true,
});
this.http.request(uploadReq).subscribe((event) => {
if (event.type === HttpEventType.UploadProgress) {
this.progress = Math.round(100 * event.loaded / event.total);
}
else if (event.type === HttpEventType.Response) {
this.message = event.body.toString();
}
});
}
我解决了问题。问题中描述的行为实际上涉及两件事。
首先。。。哗啦啦！https://angular.io/api/common/http/HttpClient
此方法 [HttpClient.request()] 可以通过以下两种方式之一调用。可以将 HttpRequest 实例作为唯一参数直接传递，也可以将方法作为第一个参数传递，将字符串 URL 作为第二个参数传递，将选项哈希作为第三个参数传递。
如果直接传递 HttpRequest 对象，则将返回原始 HttpEvent 流的可观察量。
这就解释了为什么我的两个请求(都作为HttpRequest从现在开始返回{type: 0}，无论reportProgress参数是true还是false。
另一方面，只接收SENT事件({type: 0})是后端本身的错误配置。
阅读 https://stackoverflow.com/a/54899930/1429439 后，我添加了观察："事件">参数，并开始在我的订阅中接收 HttpEvents。
如果您使用的是服务工作者，则必须发送ngsw-bypass标头。
例：-
file: File;
uploadProgress: number;
constructor(private http: HttpClient) { }
uploadData(): void {
const formData = new FormData();
formData.append('file', this.file);
const headers = new HttpHeaders({ 'ngsw-bypass': '' });
this.http.post(`upload url`, formData, {
reportProgress: true,
observe: 'events',
headers
}).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.uploadProgress = Math.round(100 * event.loaded / event.total);
}
else if (event.type === HttpEventType.Response) {
console.log(event.body);
}
});
}
return this.http.request('POST', api_enpoint , { body: body, headers: headers, reportProgress: true, withCredentials: true }).map(httpResponse => {
console.log(httpResponse);
});
而不是传递httpRequest对象，你需要以这种方式传递请求(适用于http和https)
上传表单数据以及标题详细信息
这个狙击手将帮助 ou 上传表单数据，并且在订阅时您也可以实现进度条
uploadMyImage(formData: any) {
const httpOptions = new HttpHeaders({
'Content-Type': 'multipart/form-data', 'boundary': 'something'
});
return this.http.post('http://localhost:4000/api/upload', formData, { reportProgress: true, observe: 'events', headers: httpOptions });
}