Angular HttpClient Post Два файла (Multipart / form-data) - PullRequest
Новая
       15

Angular HttpClient Post Два файла (Multipart / form-data)

0 голосов
/ 01 декабря 2018

У меня есть контроллер 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.

Обновление

Я смог использовать опцию данных формы после того, как обновил свой контроллер покоя для получения MultipartFile []: 

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

Я также избавился от HttpOptionsи пусть тип контента будет установлен автоматически: 

// Removed

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

1 Ответ

0 голосов
/ 01 декабря 2018

Вы можете отправить несколько файлов следующими способами:

1.) JSON.stringify 

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

const formData = new FormData();

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

2.) Или добавить его с помощьютот же ключ формы данных

Ссылка: 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-звонок: 

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