如何从 Angular 5 vía POST 发送到 Spring 控制器多个请求参数

Question

>我有这个弹簧控制器：

@RequestMapping(value = "/create")
@ResponseBody
public ResponseEntity<?> create(
@RequestParam String name,
@RequestParam Integer startYear,
@RequestParam Integer endYear,
@RequestParam(required=false) MultipartFile polygons,
@RequestParam(required=false) Long reference
) 

是否可以通过 POST 请求从 Angular 发送这些参数？

我正在尝试这个：

public createExperiment(): Observable<any> {
const headers = new HttpHeaders({'Content-Type': 'application/json'});
return this.http.post(this.backUrl + 'puerto/create', {name:'name'}, {headers: headers})
.map((res: any) =>
res
);
}

但是我已经收到此错误：

错误 : {时间戳：1527665099011，状态：400，错误："错误请求"，异常："org.springframework.web.bind.MissingServletRequestParameterException"，消息："必需的字符串参数'name'不存在"，...}

为什么我会收到此错误？ 如果我修复了这个问题，我也可以发送多部分文件吗？

我知道我可以解决这个问题，更改控制器并通过 ResquestBody 接收参数，但我想单独发送参数。

Answer 1

当你有URL参数时会使用@RequestParam。

http.post(url, null, { headers: headers, params: new HttpParams().set('name', 'fer') })

这将发送名称以及网址，如http://abcd.com/a/b?name=fer

如果要将其作为帖子正文发送，请在弹簧代码中定义一个模型，并在弹簧控制器中使用@RequestBody注释。

看这里的例子。

Answer 2

它使用 formData 和 ('Content-Type'， 'multipart/form-data'(;

public createExperimentService(formData: FormData): Observable<any> {
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
return this.http.post(this.backUrl + 'puerto/create', formData, {headers: headers})
.map((res: any) =>
res
);
}
formData: FormData = new FormData();
createExperiment() {
this.formData.append('name', this.nameExperiment);
this.formData.append('startYear', this.startYear);
this.formData.append('endYear', this.endYear);
this.formData.append('reference', this.reference);
this.createExperimentService(this.formData).subscribe(res => {
console.log(res);
});
}
//This method loads a file
fileChange(event) {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file: File = fileList[0];
this.formData.append('polygons', file, file.name);
}
}