Angular 5通过POST向Spring控制器传递多个RequestParam的问题

错误原因 #

你的Spring控制器用@RequestParam注解来接收参数，这类参数是从URL查询参数或者application/x-www-form-urlencoded格式的表单字段里读取的，但你当前的Angular代码是把参数放在application/json格式的请求体里发送的。Spring没办法从JSON请求体中读取@RequestParam声明的参数，所以抛出了MissingServletRequestParameterException，提示找不到必填的name参数。

修复普通参数的传递问题 #

如果只需要传递普通参数（name、startYear、endYear、reference），有两种可行的方式：

方式1：将参数作为URL查询参数传递 #

通过HttpParams构造查询参数，请求时附加到URL后面：

public createExperiment(): Observable<any> {
  const params = new HttpParams()
    .set('name', '你的实验名称')
    .set('startYear', '2024')
    .set('endYear', '2025')
    .set('reference', '123'); // 可选参数，有值才添加
  return this.http.post(`${this.backUrl}puerto/create`, {}, { params });
}

方式2：用表单格式发送参数（推荐，为后续传文件做准备） #

使用FormData封装参数，这种方式会自动设置合适的请求头，同时兼容后续文件上传的场景：

public createExperiment(): Observable<any> {
  const formData = new FormData();
  formData.append('name', '你的实验名称');
  formData.append('startYear', '2024');
  formData.append('endYear', '2025');
  // 可选参数，有值再添加
  if (yourReferenceValue) {
    formData.append('reference', yourReferenceValue.toString());
  }
  return this.http.post(`${this.backUrl}puerto/create`, formData);
}

关于MultipartFile参数的传递 #

完全可以传递MultipartFile参数！而且必须用FormData来封装请求数据，因为文件上传需要multipart/form-data格式的请求。只需要在FormData中追加文件即可，你的Spring控制器无需修改（@RequestParam可以直接接收multipart/form-data中的文件字段）：

public createExperiment(polygonFile: File | null): Observable<any> {
  const formData = new FormData();
  // 追加普通参数
  formData.append('name', '你的实验名称');
  formData.append('startYear', '2024');
  formData.append('endYear', '2025');
  // 追加文件参数（如果有文件的话）
  if (polygonFile) {
    formData.append('polygons', polygonFile, polygonFile.name); // 第三个参数为文件名，可选
  }
  // 追加可选的reference参数
  if (yourReferenceValue) {
    formData.append('reference', yourReferenceValue.toString());
  }
  return this.http.post(`${this.backUrl}puerto/create`, formData);
}

额外说明 #

不要手动设置Content-Type为application/json，当使用FormData时，Angular会自动根据内容设置正确的multipart/form-data请求头，包含必要的边界信息，这是文件上传成功的关键。

内容的提问来源于stack exchange，提问作者Fer