【发布时间】：2022-01-20 08:09:33
【问题描述】：
当我们想要报告 http 请求的上传进度时，我们会在请求中添加选项。
即
const url = environment.content_creator_self_content_feed_posts_get + '/' +
this.createdpost.id;
this.http.put(url, payload, {
reportProgress: true,
observe: 'events'
}).subscribe(
(event: any)=>{
switch (event.type){
case HttpEventType.UploadProgress:
this.coverphotoprogress = Math.round(event.loaded / event.total * 100);
break;
case HttpEventType.Response:
}
});
但是当我们链接可观察对象时，我们如何做同样的事情呢？
以这个请求为例：
uploadmedia(event, type){
this.s3.privateresourceuploadtos3(event, this.createdpost.contentcreator, this.createdpost.id, type)
.subscribe(
(req: any)=> {
this.mediahasbeenuploaded = true;
});
}
然后是它订阅的privateresourceuploadtos3函数
privateresourceuploadtos3(event, userid, contentpostid, contenttype): Observable<any>{
const mediatobeuploaded = event.target.files[0];
const url = environment.private_generate_presigned_url_resource + userid + '/' + contentpostid + '/' + contenttype;
return this.http.get(url).pipe(
switchMap((req : any)=>{
const resourceurl = req.uriroot + req.fields.key;
let fd = new FormData();
fd.append('acl', req.fields.acl);
fd.append('key', req.fields.key);
fd.append('content-type', req.fields['content-type']);
fd.append('policy', req.fields.policy);
fd.append('x-amz-meta-user', req.fields['x-amz-meta-user']);
fd.append('x-amz-meta-contentpost', req.fields['x-amz-meta-contentpost']);
fd.append('x-amz-meta-rawbucketkey', req.fields['x-amz-meta-rawbucketkey']);
fd.append('x-amz-algorithm', req.fields['x-amz-algorithm']);
fd.append('x-amz-credential', req.fields['x-amz-credential']);
fd.append('x-amz-date', req.fields['x-amz-date']);
fd.append('x-amz-signature', req.fields['x-amz-signature']);
fd.append('file', mediatobeuploaded);
return this.http.post(req.url, fd).pipe(
// answer two https://stackoverflow.com/questions/51176537/angular-6-and-node-js-aws-s3-file-upload-progress-bar
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
}
特别是这部分
return this.http.post(req.url, fd).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
发出请求，然后我们使用switchMap 更改为另一个返回请求对象的可观察对象。
将选项添加到此 http 请求中是有意义的。类似的东西
return this.http.post(req.url, fd, {
reportProgress: true,
observe: 'events'
}).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
但我不确定下一步我会做什么，所以如果请求完成，它会返回结果。
如果不是。它返回一个事件，并且订阅函数的代码正在侦听privateresourceuploadtos3 正在接收进度事件，以便可以显示在屏幕上
uploadmedia(event, type){
this.s3.privateresourceuploadtos3(event, this.createdpost.contentcreator, this.createdpost.id, type)
.subscribe(
(req: any)=> {
this.mediahasbeenuploaded = true;
});
}
【问题讨论】：
标签： angular file-upload rxjs