我希望使用Angular将数据保存到文件和表单中。 表单图像 我使用Spring Boot作为服务。
当我仅保存文件时,下面的代码有效。但是我找不到如何同时保存(文件+标题+描述)。如何同时保存所有内容?
*HTML
*HTML
<form [formGroup]="informationForm" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="inputLastName" class="label">Title</label>
<input type="text" nbInput fullWidth fieldSize="small" formControlName="title">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="inputLastName" class="label">Description</label>
<input type="text" nbInput fullWidth fieldSize="small" formControlName="description">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="inputLastName" class="label">Attachment</label>
<input type="file" nbInput fullWidth fieldSize="small" (change)="onFileSelected($event)"
formControlName="file">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="submit" nbButton size="small" (click)="onSubmit()"
status="primary">Save</button>
</div>
</div>
</div>
</form>
*Component.ts
onFileSelected(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.selectedFile = file;
}
}
onSubmit() {
const formData: FormData = new FormData();
formData.append('file', this.selectedFile);
this.service.save(formData).subscribe(res => {
if (res === 'OK') {
this.alertify.makeToastErrror();
}
else {
this.alertify.makeToastErrror();
}
});
}
*Service.ts
save(formData: FormData): Observable<any> {
return this.apiService.post(apiHost + '/saveFile', formData);
}
春季引导
@PostMapping(value = "/saveFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<HttpStatus> save(@RequestParam("file") MultipartFile file) throws IOException {
.........
}