无法使用 Angular 反应式表单发送多部分请求答案

【问题标题】：Can't send a multipart request using Angular reactive forms无法使用 Angular 反应式表单发送多部分请求
【发布时间】：2019-10-23 17:06:16
【问题描述】：

我的 Java 后端 API 期待 Angular 前端上的表单的多部分 POST 请求，该前端当前正在使用响应式表单。端点如下所示：

  @PostMapping("/submit")
  public ResponseEntity<?> submit(
      @RequestParam String requester,
      @RequestParam String subject,
      @RequestParam String description,
      @RequestParam String htmlBody,
      @RequestParam String customFieldValues,
      @RequestParam List<MultipartFile> attachments) {

    return myBackendService.submitToZendesk(
        requester, subject, description, htmlBody, customFieldValues, attachments);
  }

Angular 组件中的提交功能如下所示（目前使用的是假表单数据）：

  public onSubmit(): void {
    const formData = new FormData();
    formData.append('requester', 'ryan');
    formData.append('subject', 'Test Subject',);
    formData.append('description', 'test desc',);
    formData.append('htmlBody', '',);
    formData.append('customFieldValues', 'test');
    this.frontendService.submitForm(formData).subscribe(
      res => console.log(res),
      err => this.onHandleError(err)
    );
  }

服务：

  public submitForm(payload: any): Observable<any> {
    return this.resourceService.submitForm(payload)
  }

最后是资源服务：

  public submitShippingAuth(payload: ShippingAuthRequest): Observable<any> {
    const url = `${environment.api}/submit`
    return this.http.post(`${url}`, payload)
      .pipe(map(this.extractResponse), catchError(this.handleError))
  }

我在帖子中收到 400 状态代码：

error: "Bad Request"
message: "Required String parameter 'requester' is not present"
path: "/v1/submit"
status: 400
timestamp: 1571771034002
trace: "org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'requester' is not present

但我的请求负载肯定似乎有表单数据：

------WebKitFormBoundaryTIuEnyoDjbqZHnFA
Content-Disposition: form-data; name="requester"

ryan
------WebKitFormBoundaryTIuEnyoDjbqZHnFA
Content-Disposition: form-data; name="subject"

Test Subject
------WebKitFormBoundaryTIuEnyoDjbqZHnFA
Content-Disposition: form-data; name="description"

test desc
------WebKitFormBoundaryTIuEnyoDjbqZHnFA
Content-Disposition: form-data; name="htmlBody"


------WebKitFormBoundaryTIuEnyoDjbqZHnFA
Content-Disposition: form-data; name="customFieldValues"

test
------WebKitFormBoundaryTIuEnyoDjbqZHnFA--

有谁知道我在这里做错了什么？ Postman 中的表单数据 POST 有效。

【问题讨论】：

标签： angular multipartform-data angular-reactive-forms

【解决方案1】：

打印请求者的行应包含逗号（，），如下所示 formData.append('requester', 'ryan', );

希望这能解决您的问题。

【讨论】：

感谢 Sapna 的建议。不幸的是，这并没有解决它。是否有额外的逗号必须存在的原因，或者您只是指出不一致之处？据我所知，formData.append 的第三个参数仅用于文件名，因此在这种情况下没有必要

【解决方案2】：

提交功能看起来确实不错，formData.append 中的第三个参数是文件名，因此没有必要。我发现的唯一一件事是你没有在http post 请求中设置标题。我猜你正在使用interceptors 这样做，如果没有，请尝试这样做。

【讨论】：