Отправить данные и файл изображения на сервер

Question

У меня проблема с отправкой данных и изображений из моего Angular UI в бэкэнд Spring Boot.

Мой HTML:

<input type="file" (change)="onFileSelected($event)">

<button type="button" (click)="onUpload()" class="file-input">sdadsa</button>

Мой компонент:

 selectedFile:File = null;


     onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
  }

  onUpload() {
    const fb = new FormData();
    const data = new CategoryModel("s", "s", "s", 1);

    fb.append('image', this.selectedFile, this.selectedFile.name);
    this.data.storeProduct(data, fb).subscribe(data => {
      console.log(data)
    })

  }

Мой сервис:

/** POST Product on server */
  storeProduct(category: CategoryModel, fd: FormData): Observable<any> {
    return this.http.post(this.cateogryUrl, { category, fd }).pipe(

      catchError(this.handleError<CategoryModel>('addHero'))

    )
  }

И, наконец, мой метод Spring Boot:

@PostMapping
    @ResponseStatus(HttpStatus.OK)
    public void create(@RequestBody CategoryModel bike, @RequestParam("file") MultipartFile file) {


        String fileName = fileStorageService.storeFile(file);
        bike.setImagePath(fileName);
        categoryRepository.save(bike);
    }

Когда я отправляю данные, у меня появляется эта ошибка:

org.springframework.web.multipart.MultipartException: Current request is not a multipart request

Answer 1

Добавьте 'enctype': 'multipart/form-data' в заголовок http-запроса.

var headers = new Headers();
headers.append('enctype', 'multipart/form-data' );

// HTTP POST using these headers
this.http.post(url, data, {headers: headers});