Текущий запрос не является составным запросом / Angular-SpringBoot

Question

У меня проблема с отправкой изображения на сервер.Я использовал Spring Boot и Angular.Это мой Контроллер в Spring Boot:

 @RestController
  @RequestMapping("api/cateogry/dar")
public class CategoryController {

    private static final Logger logger = LoggerFactory.getLogger(CategoryController.class);
    @Autowired
    private CategoryRepository categoryRepository;

    @Autowired
    private FileStorageService fileStorageService;


    @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);
    }

}

Это мой application.property:

spring.jpa.database-platform=org.hibernate.dialect.SQLiteDialect
spring.jpa.hibernate.ddl-auto=none
spring.jpa.show-sql=true


spring.datasource.url=jdbc:sqlite:darDB.db
spring.datasource.username=
spring.datasource.password=
spring.datasource.driver-class-name=org.sqlite.JDBC

## MULTIPART (MultipartProperties)
# Enable multipart uploads
spring.servlet.multipart.enabled=true
# Threshold after which files are written to disk.
spring.servlet.multipart.file-size-threshold=2KB
# Max file size.
spring.servlet.multipart.max-file-size=200MB
# Max Request Size
spring.servlet.multipart.max-request-size=215MB

## File Storage Properties
file.upload-dir=./uploads

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

{
    "timestamp": "2019-02-13T14:56:31.320+0000",
    "status": 404,
    "error": "Not Found",
    "message": "No message available",
    "path": "/uploadFile"
}

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

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

Я не понимаю, в чем проблема, на переднем конце или на бэкэнде.Это мой код HTLM:

<input

  type="file" (change)="onFileChanged($event)"
  #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>

Это мой код в компоненте:

export class AppComponent implements OnInit {
  category: CategoryModel[];
  selectedFile: File = null;

  constructor(private data: DataServiceService, private http: HttpClient) { }

  ngOnInit() {
    this.data.getCategory().subscribe(data => {
      this.category = data;
      console.log(data)
    })
  }

  onFileChanged(event) {
    this.selectedFile = <File>event.target.files[0];
    console.log(this.selectedFile);
  }
  onUpload() {
    // this.http is the injected HttpClient

    const data = new CategoryModel("s", "s", "s", 1);

    const uploadData = new FormData();
    uploadData.append('myFile', this.selectedFile, this.selectedFile.name);
    this.data.storeProduct(data, uploadData).subscribe(m => {
      console.log(m)
    })
  }

}

Это мой сервис:

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Accept": "application/json" })
}
@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  constructor(private http: HttpClient) { }

  private cateogryUrl = 'api/cateogry/dar';  // URL to web api

  /** GET Category from the server */
  getCategory(): Observable<CategoryModel[]> {
    return this.http.get<CategoryModel[]>(this.cateogryUrl).pipe(

      catchError(this.handleError('getProduct', []))
    )
  }

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

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

  )
}

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead



      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}