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

Posted 2023-02-26

【中文标题】所需的请求部分“文件”不存在 - Angular 4

【英文标题】：Required request part 'file' is not present - Angular 4

【发布时间】：2019-08-23 09:09:46

【问题描述】：

我正在尝试使用 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"

更新：

附上我的浏览器控制台上出现的错误截图。

请求标头

从请求中删除自定义边界后的请求标头

从标头中删除内容类型后的请求标头

【问题讨论】：

检查实际请求以了解发生了什么。

检查浏览器控制台以查看实际请求。这是尽可能具体的。

那不是请求，而是响应——更准确地说，是应用程序对它的反应。显示请求。

我已经添加了请求。

【参考方案1】：

您将自定义边界标头设置为“流入”，但浏览器会忽略它并使用自己的分隔符 - 服务器不知道如何拆分该多部分，从而导致丢失部分 浏览器没有显示文件内容（通常会显示）或者您根本没有发送它 - 可能 File 没有正确读取

对于初学者，不要使用自定义多部分边界，让浏览器处理它。 Send multipart/form-data files with angular using $http 这里的一些答案表明不需要显式声明多部分内容类型 - 但没有人描述它是作为多部分发送的。尝试专注于该主题。

【讨论】：

但如果我删除多部分边界，我会收到 FileUploadException 并显示此消息“无法解析多部分 servlet 请求；请求被拒绝，因为未找到多部分边界”。我是新手，请您帮忙提供代码。

删除自定义标头时检查请求。也许它根本就不是多部分的。

删除自定义边界后，我在上面添加了我的请求标头的屏幕截图。它似乎是多部分的。

检查这是否为您发送了多部分属性。 stackblitz.com/edit/… 顺便说一句，我没有使用糟糕的 chrome。

我可以看到浏览器没有在您的情况下设置边界。您是否完全删除了标题？或者你只是跳过边界？无论如何，我之前的评论中有一个工作示例。与之比较网络流量。

【参考方案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));

【讨论】：

嘿，这没用。仍然出现同样的错误。