Ошибка при выполнении http-post-вызова от angular 4 client к контроллеру Spring для загрузки файла

Question

Я делаю http-post запрос на мой весенний загрузочный сервер для загрузки файла. Я получаю следующую ошибку:

status":400,"error":"Bad 
Request","exception":"org.springframework.web.multipart.support.MissingServletRequestPartException","message":"Required request part 'File' is not present".

Ниже приведен мой HTML-код

<form  enctype="multipart/form-data">
  <div class = "form-group">
    <input type = "file" id = "selectFile" #selectFile name = "File" class = "btn" value = "file"/>
    <input type = "button" class = "btn btn-primary" (click) = "upload()" value = "Upload file"/>
  </div>

</form>

Ниже следует угловой компонент

upload() {
    const fileBrowser = this.fileInput.nativeElement;
    if (fileBrowser.files && fileBrowser.files[0]) {
      const formData = new FormData();
      console.log(fileBrowser.files[0]);
      formData.append('file', fileBrowser.files[0]);
      console.log(formData.getAll('file'));
      this.fileUploader.uploadFile(formData).then( Response => {
        //     console.log(Response);
     });
    }
  }

Ниже приведен класс обслуживания Angular:

import { Injectable } from '@angular/core';
// import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, Http, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/toPromise';

/* import 'rxjs/add/observable/catch' ;
import 'rxjs/add/observable/throw' ; */

@Injectable()
export class FileUploadService {

  constructor(private http: Http) { }
  public uploadFile(formdata: any): Promise<any> {
    const url = '/api/upload';
    const headers = new Headers();
    // headers.append('Content-type', 'undefined');
    const data = formdata;
    const options = new RequestOptions({ headers: headers });
    console.log(data);
    return this.http
            .post(url, data, options)
            .toPromise()
            .then(response => { console.log(response); } )
            .catch(error => console.log(error) ) ;
  }

}

Контроллер Spring - это:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;

@Controller
public class UploadController {

    //Save the uploaded file to this folder
    private static String UPLOADED_FOLDER = "D://Uploaded_Files//";

    /*@GetMapping("/api")
    public String index() {
        return "upload";
    }*/

    @PostMapping("/api/upload") // //new annotation since 4.3
    @CrossOrigin(origins="http://localhost:4200")
    public String singleFileUpload(@RequestParam("File") MultipartFile file,  RedirectAttributes redirectAttributes) {
        System.out.println("Called");
        if (file.isEmpty()) {
            redirectAttributes.addFlashAttribute("message", "Please select a file to upload");
            System.out.println("inside post uploade");
            return "success";
        }
        try {

            // Get the file and save it somewhere
            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);

            redirectAttributes.addFlashAttribute("message",
                    "You successfully uploaded '" + file.getOriginalFilename() + "'");

        } catch (IOException e) {
            e.printStackTrace();
        }
        return "failure";
    }

Помимо ошибки 400, я также получаю ресурс 404, не найденный при загрузке выбранного файла. Пожалуйста, помогите. Я новичок как в угловой, так и в весенней. Спасибо заранее. Вот мой полезный груз запроса

------WebKitFormBoundaryBj0YgTA8dlQbXKF2 Content-Disposition: form-data; Name="файл"; filename="README.txt" Content-Type: text/plain