所需的请求部分“文件”不存在 - Angular 4

Question

我正在尝试使用 Angular 4 上传 csv 文件。

这是我在 Spring Boot 中的控制器 -

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

这就是我使用 Angular 4 在 http post 中发送 csv 文件的方式 -

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 没有正确读取

对于初学者，不要使用自定义多部分边界，让浏览器处理它。 Send multipart/form-data files with angular using $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));