Отправка строковых данных и файлов через одну конечную точку на сервер на основе Spring - PullRequest
Новая
       14

Отправка строковых данных и файлов через одну конечную точку на сервер на основе Spring

0 голосов
/ 04 февраля 2019

У меня есть конечная точка на основе Spring: 

  @PostMapping("/new")
  public ResponseEntity house(@RequestBody Map<String ,Object> data) {
    data.values().forEach(System.out::println); 
    return ResponseHub.defaultFound("");
  }

Я просто хочу отправить файл вместе с некоторыми данными.Я использую Ionic с Angular, поэтому в Angular у меня есть: 

  let map = new TSMap();
    map.set('field1', 'wan');
    map.set('field2', 'two');
    this.files = event.target.files;
    map.set('files', this.files);
    let data = map.toJSON();
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      })
    };
    let url = "http://localhost:8080/api/data";
    this.http.post<HttpResponse>(url, data, httpOptions).pipe().toPromise().then(response=>{
      console.log(response);
    });

К сожалению, вывод, который я получаю на моем бэкэнде, просто 

wan
two
{0={}}

Я знаю, что это потому, что у меня есть Content-Введите значение application/json в запросе http, который у меня есть на Angular.Я искал здесь и там, я нашел решение, но позволяет загрузить один файл, и я не смогу добавить другие данные вместе с ним.Что было бы лучшим решением?

Редактировать: HTML-код, который вызывает функцию, содержащую код Angular: 

  <ion-item>
    <ion-label id="profile_image" stacked>Select File</ion-label>
    <ion-input type="file" accept=".png, .jpg" multiple (change)="selectFile($event)">
      Select Image
    </ion-input>
  </ion-item>

Это откуда он получает файлы.

Предлагаемое решение: Я пытался использовать FormData

  selectFile(event) {
    let formData = new FormData();
    let map = new TSMap();
    map.set('field1', 'wan');
    map.set('field2', 'two');
    let data = map.toJSON();
    formData.append('data', JSON.stringify(data));
    this.files = event.target.files;
    formData.append('files', this.files);
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'multipart/form-data'
      })
    };
    let url = "http://localhost:8080/api/data";
    this.http.post<HttpResponse>(url, formData, httpOptions).pipe().toPromise().then(response=>{
      console.log(response);
    });
  }

Backend: 

  @PostMapping("/data")
  public ResponseEntity house(@RequestPart(name = "data") Map<String, Object> data,
                              @RequestPart(name = "files") MultipartFile[] files) throws IOException {
    data.values().forEach(System.out::println);
    for (MultipartFile file: files)
      System.out.println(file.getInputStream().available());
    return ResponseHub.defaultFound("");
  }

Теперь он просто дает мне эту ошибку:

org.apache.tomcat.util.http.fileupload.FileUploadException: запрос был отклонен, поскольку не было найдено многокомпонентной границы

...