Angular HttpClient 发送两个文件（Multipart/form-data）POST请求

Question

我有一个Java Spring Boot控制器，可以接受两个MultipartFile请求参数。我已经通过Swagger和Postman测试了这个端点，并且它可以正常工作。请参见以下接口：

@RequestMapping(value = "/start/", method = RequestMethod.POST)
ResponseEntity<String> startSim(@RequestParam("scenario") MultipartFile scenarioFile, @RequestParam MultipartFile probabilityFile);

在Angular中，我已添加了代码来选择/上传文件。我将这些文件存储在我的app.component.ts文件中作为私有变量configFile和parameterFile，如下所示：

 uploadConfigFile(e) {
    const reader = new FileReader();
    const file = e.target.files[0];
    this.configFile = file;
    // reader.onload = () => {
    //   this.configFile = reader.result;
    // };
    // reader.readAsBinaryString(file);
  }

  uploadParameterFile(e) {
    const reader = new FileReader();
    const file = e.target.files[0];
    this.parameterFile = file;
    // reader.onload = () => {
    //   this.parameterFile = reader.result;
    // };
    // reader.readAsBinaryString(file);
  }

如何使用POST方法同时发送文件？

  startSim(e) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
    };
    console.log(this.configFile);
    console.log(this.parameterFile);

    // const formData = new FormData();
    // formData.append('scenarioFile', this.configFile);
    // formData.append('probabilityFile', this.parameterFile);
    //
    // console.log(formData);

    const params = new HttpParams();
    params.append('scenarioFile', this.configFile);
    params.append('probabilityFile', this.parameterFile);

    const result = this.http.post(this.startURL, params, httpOptions);
    result.subscribe(json => console.log(json));
  }

我尝试使用FormData和HttpParams来发送请求。 更新 在我的REST控制器中更新MultipartFile[]后，我能够使用表单数据选项。

   ResponseEntity<String> startSim(@RequestParam("configList") MultipartFile[] configList);

我还去掉了HttpOptions，并让内容类型自动设置：

// Removed

 const httpOptions = {
          headers: new HttpHeaders({
            'Content-Type': 'multipart/form-data'
          })
    };

- dunnj515

Answer 1

你可以使用以下方法发送多个文件：

1.) JSON.stringify

const list = [ 
   { scenarioFile: this.configFile },
   { probabilityFile: this.parameterFile }
];

const formData = new FormData();

formData.append("configList", JSON.stringify(list));

2.) 或使用相同的formData键追加

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

与常规表单数据一样，您可以追加具有相同名称的多个值

const formData = new FormData();

formData.append('configList', this.configFile);
formData.append('configList', this.parameterFile);

console.log(formData.getAll('configList'));  // Shows the content of configFile and parameterFile

然后您可以继续进行http post调用：

this.http
   .post(this.startURL, formData, httpOptions)
   .subscribe(json => console.log(json));

- KShewengger

---

谢谢！在我更新了我的REST控制器之后，我能够使用你上面提到的formData选项。 - dunnj515