Требуемая часть запроса 'file' отсутствует - Angular 4

Question

Я пытаюсь загрузить CSV-файл, используя Angular 4.

Это мой контроллер при весенней загрузке -

@PostMapping("/sop-master/csv-upload")
@ResponseStatus(HttpStatus.OK)
@ResponseBody
public List<SopMasterDto> uploadCSV(@RequestParam("file") MultipartFile file, @RequestBody SopMasterDto sopMasterDto) throws IllegalStateException, IOException {
    return convertToDtos(sopMasterService.updateSopMaster(file, sopMasterDto.getUsername(),sopMasterDto.getPassword()), SopMasterDto.class);
}

И вот как я отправляю свой файл csv в пост http с использованием Angular 4 -

uploadCSV(file: File) {
    let formData:FormData = new FormData();
    formData.append('file', file, file.name);

    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data; boundary=Inflow');
    headers.set('Accept', 'application/json');
    let options = new RequestOptions({ 'headers': headers })

    return this.http.post(AppSettings.API_ENDPOINT + 'manage/sop-master/csv-upload/', formData, options)
        .map((res) => console.log(res))
        .catch(error => Observable.throw(error));
}

Это то, что я имею в виду -

<input type="file" class="btn btn-default" accept=".csv" (change)="changeListener($event.target.files)">

changeListener (files: FileList) {
    if (files && files.length > 0) {
    let file: File = files.item(0);
    this.manageService.uploadCSV(file)
      .subscribe((response) => {
          this.refreshDatatable();
      });
    }
}

Таким образом, загрузка файлов работает абсолютно нормально, когда осуществляется через Postman, но я продолжаю получать эту ошибку, когда выполняется через Angular 4 -

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

Обновление

Прикрепление снимка экрана с ошибкой, которая появляется на консоли моего браузера.

Заголовки запроса

Заголовок запроса после удаления пользовательской границы из запроса

Запрос заголовков после удаления типа содержимого из заголовков

Answer 1

1. Вы устанавливаете свой настраиваемый заголовок границы на «приток», но браузер игнорирует его и использует собственный разделитель - сервер не знает, как разделить эту составную часть, что приводит к отсутствию части
2. Либо браузер не показывает содержимое файла (обычно это так), либо вы не отправляете его вообще - возможно, File не читается правильно

Что касается начинающих, не используйте настраиваемую многосвязную границу и не позволяйте браузеру обрабатывать ее. Некоторые ответы здесь Отправка файлов multipart / form-data с угловым значением с использованием $ http предполагает, что не требуется явно объявлять тип составного содержимого - но никто не описывает, отправляется ли он как составное. Попробуйте сосредоточиться на этой теме.

Answer 2

Я думаю, что ваша проблема в том, что вы отправляете @RequestParam ("file") и @RequestBody вместе.

Попробуйте это:

@RequestMapping(value = "/sop-master/csv-upload", method = RequestMethod.POST, consumes = { "multipart/form-data" })
public List<SopMasterDto> uploadCSV(@RequestPart("file") MultipartFile file, @RequestPart("sopMasterDto") SopMasterDto sopMasterDto) {
....
}

и в Angular это:

let formData:FormData = new FormData();
    formData.append('file', file, file.name);
    formData.append('sopMasterDto', JSON.stringify(<your DTO ??? >))

    let headers = new Headers();
    headers.append('Content-Type', 'multipart/form-data');
    headers.set('Accept', 'application/json');
    let options = new RequestOptions({ 'headers': headers })

    return this.http.post(AppSettings.API_ENDPOINT + 'manage/sop-master/csv-upload/', formData, options)
        .map((res) => console.log(res))
        .catch(error => Observable.throw(error));