如何通过 POST 从 Angular 5 向 Spring 控制器发送多个 RequestParams

Posted 2023-02-26

【中文标题】如何通过 POST 从 Angular 5 向 Spring 控制器发送多个 RequestParams

【英文标题】：How to send from Angular 5 vía POST to Spring controller multiple RequestParams

【发布时间】：2018-11-08 23:23:04

【问题描述】：

我有这个 Spring 控制器：

@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
      );
  

但我已经收到此错误：

错误 ： timestamp: 1527665099011, status: 400, error: "Bad Request", exception: "org.springframework.web.bind.MissingServletRequestParameterException", message: "Required String parameter 'name' is not present", ...

为什么会出现此错误？如果我解决了这个问题，我可以发送 MultiPartFile 吗？

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

【参考方案1】：

它使用 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);
        
      

【参考方案2】：

@RequestParam 在您有 url 参数时使用。

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

这将发送名称和 URL，如 http://abcd.com/a/b?name=fer

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

以here 为例。