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

【问题标题】：How to send from Angular 5 vía POST to Spring controller multiple RequestParams如何通过 POST 从 Angular 5 向 Spring 控制器发送多个 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 接收参数，但我想单独发送参数。

【问题讨论】：

标签： spring angular http post controller

【解决方案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 为例。

【讨论】：