发送带有 MultipartFile 字段的对象列表返回 415 Unsupported Media Type答案

【问题标题】：Sending list of objects with MultipartFile field return 415 Unsupported Media Type发送带有 MultipartFile 字段的对象列表返回 415 Unsupported Media Type
【发布时间】：2021-12-07 12:40:05
【问题描述】：

我正在尝试将对象列表发送到 api (Spring Boot)，其中模型具有 MultiPartFile 字段和描述字段，但服务器每次都返回我 415 Unsupported Media Type。我在前端使用 Angular 9 来发送数据。

我的 Java DTO 对象如下所示：

public class FooRequestDTO {

    private String description;

    private MultipartFile file;

    // getters.. setters..

}

我的端点控制器：

@PostMapping(value = "/foo", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
@ResponseBody
public void upload(@RequestBody List<FooRequestDTO> FooRequestDTOList) {
   // something
}

还有我在 Angular 中使用的方法：

upload(files: FileInfo[]): Observable<void> {
   const formData = new FormData();
   for (var i = 0; i < files.length;i++) {
     formData.append(`description[]`, files[i].description);
     formData.append(`file[]`, files[i].file);
   }
   return this.http.post<void>(`/foo`, formData);
}

我也尝试直接发送files 对象，但它没有任何改变。 FileInfo 只有 File file 和 string description 字段。

有什么办法可以解决我的问题吗？在网上我没有发现任何类似的问题。

【问题讨论】：

在发布请求时尝试将content-type 标头设置为multipart/form-data。
@SKumar 服务器抛出异常the request was rejected because no multipart boundary was found
a baeldung article, (all possible) @RequestMethod parameters, a sample with multiple files
你有多个选项（！），但服务器端“应该工作”，客户端应该“遵守”！
@xerx593 我看到了这篇文章。问题是我有对象列表，这些示例对我不起作用:(

标签： javascript java angular spring-boot multipartfile

【解决方案1】：

您需要在请求中添加以下标头详细信息才能执行此操作。

Content-Type: multipart/form-data; boundary=12345

【讨论】：

有人在评论中建议，但结果是一样的。
添加边界后你现在遇到什么错误？
相同，415 不支持的媒体类型
你能从邮递员那里测试你的 api 吗？如果是，您传递的标头值是什么？

【解决方案2】：

首先修改api方法来处理表单数据列表/仅表单数据。如果表单数据对象列表意味着您的 api 正确但角度代码不正确。如果只有一个 formdata 对象意味着两者都不正确。

对于单个formdata对象修改api代码如下：

@PostMapping(value = "/foo", consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
@ResponseBody
public void upload(@RequestBody FooRequestDTO FooRequestDTOList) {
   // something
}

角度：如果只发送单个 formdata 对象，修改代码如下：

upload(files: FileInfo[]): Observable<void> {
   const formData = new FormData();
   for (var i = 0; i < files.length;i++) {
     formData.append(`description`, files[i].description);
     formData.append(`file`, files[i].file);
   }
   return this.http.post<void>(`/foo`, formData);
}

如果发送多个formdata对象意味着修改代码如下：如果只发送单个 formdata 对象，修改代码如下：

upload(files: FileInfo[]): Observable<void> {
   const formData = new FormData();
   for (var i = 0; i < files.length;i++) {
     formData.append(`description`, files[i].description);
     formData.append(`file`, files[i].file);
   }
   return this.http.post<void>(`/foo`, [formData]);
}

【讨论】：