使用一个调用 observable 的函数,其中 3 个不同的 observable 与 switch map 绑定在一起。结果出错
using a function that calls observable with 3 different observables tied together with switch map. results in error
我有一个函数,当文件上传到 html 表单时运行。
uploadidnexttofacepicture(event){
let subscription = this.s3service.publicresourceuploadtos3(event)
.subscribe((req: any)=>{
console.log(req);
});
}
此函数从注入的服务调用函数 publicresourceuploadtos3
。此函数显示如下:
publicresourceuploadtos3(event): Observable<any>{
console.log('the service at least ran');
const mediatobeuploaded = event.target.files[0];
this.http.get(environment.public_generate_presigned_url_resource).pipe(
switchMap((req : any)=>{
console.log('did the call to the server');
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-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);
this.http.post(req.url, fd).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
}
控制台日志 console.log('the service at least ran');
确实在控制台中触发,但服务器调用了一个:console.log('did the call to the server');
没有。
但这会导致错误:
ERROR TypeError: Cannot read property 'subscribe' of undefined
at ContentcreatorverificationComponent.uploadidnexttofacepicture
我担心这是一个语法问题,如果你们知道发生了什么,将会有所帮助。
尝试在this.http.get(environment.public_generate_presigned_url_resource)
之前添加return
应该是这样的
publicresourceuploadtos3(event): Observable<any>{
console.log('the service at least ran');
const mediatobeuploaded = event.target.files[0];
return this.http.get(environment.public_generate_presigned_url_resource).pipe(
switchMap((req : any)=>{
console.log('did the call to the server');
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-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);
this.http.post(req.url, fd).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
}
我有一个函数,当文件上传到 html 表单时运行。
uploadidnexttofacepicture(event){
let subscription = this.s3service.publicresourceuploadtos3(event)
.subscribe((req: any)=>{
console.log(req);
});
}
此函数从注入的服务调用函数 publicresourceuploadtos3
。此函数显示如下:
publicresourceuploadtos3(event): Observable<any>{
console.log('the service at least ran');
const mediatobeuploaded = event.target.files[0];
this.http.get(environment.public_generate_presigned_url_resource).pipe(
switchMap((req : any)=>{
console.log('did the call to the server');
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-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);
this.http.post(req.url, fd).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
}
控制台日志 console.log('the service at least ran');
确实在控制台中触发,但服务器调用了一个:console.log('did the call to the server');
没有。
但这会导致错误:
ERROR TypeError: Cannot read property 'subscribe' of undefined
at ContentcreatorverificationComponent.uploadidnexttofacepicture
我担心这是一个语法问题,如果你们知道发生了什么,将会有所帮助。
尝试在this.http.get(environment.public_generate_presigned_url_resource)
return
应该是这样的
publicresourceuploadtos3(event): Observable<any>{
console.log('the service at least ran');
const mediatobeuploaded = event.target.files[0];
return this.http.get(environment.public_generate_presigned_url_resource).pipe(
switchMap((req : any)=>{
console.log('did the call to the server');
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-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);
this.http.post(req.url, fd).pipe(
switchMap((req2: any)=>{
const result = {
resourceurl : resourceurl,
resourcekey: req.fields.key
};
return of(result);
}));
}));
}