Angular9上传文件至NestJs：FileInterceptor无法读取formData的file字段问题

你的问题核心出在前端请求的构造方式上，导致后端NestJS无法正确解析FormData里的file字段。我帮你拆解一下问题和解决方案：

错误原因 #

你当前的前端代码把formData包裹在了一个普通对象里传给HttpClient.post：

return this.http.post<any>(`${this.serverUrl}/medias`, { formData });

Angular遇到普通对象时，会默认把它序列化为JSON格式发送，而不是使用multipart/form-data格式，这就导致后端接收不到正确的文件数据，自然返回undefined。

修正后的前端代码 #

直接把formData作为请求体传递给post方法即可：

/* Upload an image into the server */
uploadImage(image: File) {
  const formData = new FormData();
  formData.append('file', image);
  // 直接传递formData，不需要额外包裹对象
  return this.http.post<any>(`${this.serverUrl}/medias`, formData);
}

额外说明 #

• 不需要手动设置multipart-data请求头：Angular在检测到请求体是FormData时，会自动添加正确的Content-Type: multipart/form-data请求头（包含必要的boundary值），手动设置反而可能因为缺少边界值导致解析失败。
• 你的后端代码是没问题的：Postman能正常上传，说明NestJS的FileInterceptor配置（指定file字段、存储设置等）都是正确的，问题完全出在前端请求格式上。

改完之后再测试一下，应该就能正常让后端读取到文件并保存了。

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