下面是我的record-uploader.component.ts文件。在调用上载方法时,我想将S3存储桶响应的位置存储到recordForm变量中。 console.log(this.recordForm)
的输出返回未定义的路径。这可能是由于angular中的异步调用。
我想将位置URL存储到后端服务器,有什么方法可以检索和使用数据?
@Component({
selector: 'app-record-uploader',
templateUrl: './record-uploader.component.html',
styleUrls: ['./record-uploader.component.css']
})
export class RecordUploaderComponent implements OnInit {
recordForm: Record;
selectedFiles: FileList;
constructor(
private dataService: DataService,
private recordService: RecordService
) {
this.recordForm = new Record();
}
ngOnInit() {}
upload() {
const file = this.selectedFiles.item(0);
this.recordForm.posted_by = this.dataService.getName();
this.recordForm.path = this.uploadFile(file);
console.log(this.recordForm);
}
selectFile(event) {
this.selectedFiles = event.target.files;
}
uploadFile(file) {
const contentType = file.type;
const bucket = new S3(
{
accessKeyId: 'YOUR-ACCESS-KEY-ID',
secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',
region: 'YOUR-REGION'
}
);
const params = {
Bucket: 'YOUR-BUCKET-NAME',
Key: this.FOLDER + file.name,
Body: file,
ACL: 'public-read',
ContentType: contentType
};
bucket.upload(params, function (err, data) {
if (err) {
console.log('There was an error uploading your file: ', err);
return false;
}
console.log('Successfully uploaded file.', data);
return data.Location;
});
}
}
Record.ts如下:
export class Record {
constructor(
public id?: number,
public title?: string,
public type?: string,
public edition?: string,
public category?: string,
public specialisation?: string,
public path?: string,
public posted_by?: string,
public posted_at?: string
) { }
}
您正确地假设问题是由于异步数据引起的。一种解决方法是使所有依赖异步数据的功能也都实现异步。我们可以使用RxJS Subject
实现它。尝试以下操作
uploadFile()
功能
uploadFile(file): Observable<any> {
const result = new Subject<any>();
const contentType = file.type;
const bucket = new S3(
{
accessKeyId: 'YOUR-ACCESS-KEY-ID',
secretAccessKey: 'YOUR-SECRET-ACCESS-KEY',
region: 'YOUR-REGION'
}
);
const params = {
Bucket: 'YOUR-BUCKET-NAME',
Key: this.FOLDER + file.name,
Body: file,
ACL: 'public-read',
ContentType: contentType
};
bucket.upload(params, ((err, data) => {
if (err) {
console.log('There was an error uploading your file: ', err);
result.error(err); // <-- push error here
} else {
console.log('Successfully uploaded file.', data);
result.next(data.Location); // <-- push value here
}
}));
return result;
}
然后您可以订阅uploadFile()
函数来检索数据。
upload() {
const file = this.selectedFiles.item(0);
this.recordForm.posted_by = this.dataService.getName();
this.uploadFile(file).subscribe(
location => {
this.recordForm.path = location;
console.log(this.recordForm);
},
error => {
console.log('There was an error uploading your file: ', err);
}
);
}