所需的请求部分“文件”不存在-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帖子中发送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));