如何同步我的函数调用以将数据存储在Angular中的recordForm变量中?

问题描述 投票:0回答:1

下面是我的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
  ) { }
}
angular typescript rxjs observable
1个回答
0
投票

您正确地假设问题是由于异步数据引起的。一种解决方法是使所有依赖异步数据的功能也都实现异步。我们可以使用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); 
    }
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.