Spring3.3.3+Angular16多文件传JSON报415错误求助

核心问题分析 #

415错误表示请求的媒体类型不被接口支持，结合你的代码，问题主要出在前端请求构建不符合后端接口的参数解析要求，同时Postman测试的参数格式也存在问题。

一、修复Angular端请求构建代码 #

1. 正确传递多文件集合 #

后端接口@RequestPart("files") Set<MultipartFile> files期望接收多个同名的files表单参数，但你当前把所有文件打包成一个Blob再append，导致后端无法识别为多文件集合。修改方式：

let formDataWithFiles = new FormData();
const filesInfo = [] as Array<Media>;

this.postMedias.forEach(postMedia => {
  // 修复base64转File的错误：去掉dataURL前缀并解码
  const base64Data = postMedia.base64.split(',')[1];
  const byteCharacters = atob(base64Data);
  const byteNumbers = Array.from(byteCharacters, c => c.charCodeAt(0));
  const byteArray = new Uint8Array(byteNumbers);
  
  // 正确创建File对象，指定匹配的MIME类型
  const file = new File(
    [byteArray], 
    postMedia.fileData.fileName, 
    { type: `image/${postMedia.fileData.mediaExtension.toLowerCase()}` }
  );
  
  // 逐个append文件，使用同一个参数名"files"
  formDataWithFiles.append('files', file);
  filesInfo.push(postMedia.fileData);
});

2. 正确传递MediaUploadDTO集合 #

后端需要将mediaUploads解析为Set<MediaUploadDTO>，但直接append JSON字符串时，默认Content-Type是text/plain，后端无法自动解析为DTO对象。需要将JSON字符串包装为Blob并指定application/json类型：

// 包装JSON为Blob并指定媒体类型，让后端识别为JSON格式
const mediaBlob = new Blob([JSON.stringify(filesInfo)], { type: 'application/json' });
formDataWithFiles.append('mediaUploads', mediaBlob);

3. 避免手动设置请求头 #

Angular的HttpClient在传递FormData时会自动生成正确的Content-Type: multipart/form-data（包含边界符），无需手动设置，避免手动设置导致边界符不匹配的问题。

二、Postman测试的正确姿势 #

要匹配后端接口要求，Postman需按以下步骤配置：

• 请求方法：POST，URL带上?profileId=你的UUID值
• Body类型选择form-data
• 添加参数：
  • 多个files参数：每个参数类型选File，选择本地文件，参数名均为files
  • mediaUploads参数：类型选Raw，格式选择JSON，输入对应的DTO数组（例如：[{"mediaExtension":"PNG","mediaPrivacy":"PUBLIC","mediaPrice":0.0,...}]）
• 发送请求，确认是否返回200

三、后端接口的优化建议 #

1. 将Set类型改为List，Spring对List的集合解析兼容性更好：

@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public List<Media> uploadMediaToS3(@RequestPart("files") List<MultipartFile> files,
                                   @RequestPart("mediaUploads") List<MediaUploadDTO> mediaUploadDTOs,
                                   @RequestParam("profileId") UUID profileId) throws IOException, FindMeDataNotFoundException {
    logger.info("WORKED! " + profileId.toString());
    return new ArrayList<>();
}

2. 确认MediaUploadDTO类的字段与前端JSON字段完全匹配，必要时添加@JsonProperty注解指定映射关系，确保Jackson能正确反序列化。

四、验证配置 #

你的application.properties中multipart配置已经正确，Spring 3.3.3和Java 17环境下无需额外调整。

内容的提问来源于stack exchange，提问作者Alfredo Marin