带有空参数的Angular 4多部分表单答案

【问题标题】：Angular 4 multipart form with null parameters带有空参数的Angular 4多部分表单
【发布时间】：2018-02-14 00:55:19
【问题描述】：

大家好，我在 Angular 4.3 + Spring Boot Rest 应用程序上发布多部分表单数据时遇到问题。无论我在 Java 方法中作为参数输入什么，我都会收到消息“所需的请求部分 'arquivo' 不存在”或“所需的请求参数 'arquivo' 不存在”。

这是表单代码的一部分：

<form (ngSubmit)="onFormSubmit()" [formGroup]="formulario" enctype="multipart/form-data">
          <div formGroupName="sumarizacao">
            <div class="row">

       <!-- Nome da sumarização -->
              <div class="form-group col-sm-3">
                <label for="summarizationName">*Nome da Sumarização</label>
                <input type="text" class="form-control" id="summarizationName" formControlName="nome" placeholder="Nome">
                <div *ngIf="formulario.controls['sumarizacao'].controls['nome'].errors && formulario.controls['sumarizacao'].controls['nome'].dirty"><small> Campo obrigatório</small></div>
              </div>

  <!-- control file upload -->
            <div class="form-group col-sm-9">
              <label class="form-control-label custom-submit" id="controlFileLabel" for="envio-arquivo-ctl">Arquivo de controle</label>
              <i class="fa fa-check-circle" aria-hidden="true" *ngIf="file != null"></i>
              <div>
                <input type="file" id="envio-arquivo-ctl" (change)="fileEvent($event)" accept=".ctl">
                <div *ngIf="file != null"><p>{{file.name}}</p></div>
                <div *ngIf="formulario.controls['arquivo'].name != '' && formulario.controls['arquivo'].dirty"><small> Campo obrigatório</small></div>
              </div>
            </div>
         </div>
          <button type="submit" class="btn btn-sm btn-primary" [disabled]="formulario.invalid"><i class="fa fa-check" aria-hidden="true"></i> Gravar</button>
          <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Resetar</button>
        </form>

发布方式：

  salvarSumarizacao(formGroup: FormGroup): Observable<Sumarizacao> {
    let formData = new FormData();
    let header = new HttpHeaders().set('enctype', 'multipart/form-data').set('Accept', 'application/json');
    formData.append('sumarizacao', JSON.stringify(formGroup.value.sumarizacao));
    if (formGroup.value.arquivo !== '') {
      formData.append('arquivo', formGroup.value.arquivo, formGroup.value.arquivo.name);
    }
    return this.http.post(URIConstantes.SUMARIZACAO, formData, { headers: header })
      .map(resp => resp as Sumarizacao)
      .catch(this.handleErrorObservable)
  }

当我打印 formData 或 formGroup 时，它看起来很好，所有数据都在那里，但是当它进入后端时它似乎崩溃了。

 @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA)
    @Produces({MediaType.APPLICATION_JSON})
    public Response incluir(@RequestParam(value="arquivo") MultipartFile arquivo, @RequestParam(value = "sumarizacao") Sumarizacao sumarizacao, HttpServletRequest request) {
        ObjectMapper mapper = new ObjectMapper();
        //sumarizacao = mapper.readValue(request.getParameter("sumarizacao"), Sumarizacao.class);
        //Sumarizacao sumRetorno = sumarizacaoService.incluir(sumarizacao, arquivo.getInputStream());
        RetornoResourceDTO<Sumarizacao> retornoResourceDTO = RetornoResourceDTO.<Sumarizacao> criarComResultado(new Sumarizacao());
        adicionarMensagemSucesso(retornoResourceDTO);
        return Response.ok(retornoResourceDTO).build();

    }

当我将 HttpServletRequest 作为参数时，它给了我 null multiPartfiles 和 MultipartParametersName
当我输入参数（@RequestBody 字符串测试）时，'test' 字符串给了我整个请求正文（所有表单数据和文件数据作为字符串，包括边界）
李>
当我发布到http://httpbin.org/post 时，它可以工作，我得到的回复是： enter image description here

我尝试过使用@RequestPart、@RequestParam 和两者，它显示“所需的参数/部分不存在”。我也尝试了@FormDataParam，对象为空。 :(

【问题讨论】：

标签： angular rest spring-boot multipartform-data

【解决方案1】：

我让它与 MultipartHttpServletRequest 参数和 CommonMultipartResolver bean 一起工作。

    @Bean
    public CommonsMultipartResolver commonsMultipartResolver() {
        final CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
        commonsMultipartResolver.setMaxUploadSize(-1);
        return commonsMultipartResolver;
    }


@PostMapping(consumes = MediaType.MULTIPART_FORM_DATA, produces = MediaType.APPLICATION_JSON)
    public Response incluir(MultipartHttpServletRequest http) { }

我使用 Spring Boot 1.5.3、Spring Security 3.2.10 和 Spring Core 4.3.8

【讨论】：