Angular上传文件至NestJS后端时文件数据无法获取的问题求助

嘿，看起来你碰到了前后端文件上传的典型坑，我来帮你排查问题并给出解决方案：

问题根源分析 #

你现在的核心问题有两个：

1. 前端Angular用JSON格式发送文件数据，但文件属于二进制数据，无法通过JSON正常传输，后端自然拿不到有效数据；
2. 后端NestJS的拦截器参数和接收方式不匹配，没法正确解析前端传来的文件。

第一步：修改Angular前端代码，用FormData传输数据 #

把你的pfpYES()方法改成下面这样，用FormData来包装用户ID和文件：

async pfpYES() {
  console.log(this.pfpData);
  // 创建FormData对象，专门处理带文件的表单数据
  const formData = new FormData();
  // 添加用户ID字段
  formData.append('userid', this.userid);
  // 添加文件，注意这里的key是'pfp'，后面后端要和这个名字对应
  formData.append('pfp', this.pfpData);

  this.http
    .post(`http://localhost:3000/api/user/newpfp`, formData)
    .subscribe((response) => {
      console.log(response);
    });
}

为什么要这么改？因为FormData会自动设置正确的请求头（Content-Type: multipart/form-data），这是传输二进制文件的标准方式，后端才能正确解析文件内容。

第二步：修改NestJS后端代码，正确接收文件和字段 #

你的后端现在有两个明显问题：

• FileInterceptor('file')里的参数是file，但前端传的文件key是pfp，两者不匹配；
• 不能只靠@Body()拿所有数据，文件需要用@UploadedFile()装饰器单独接收。

修改后的后端代码如下：

import { Controller, Post, UseInterceptors, Body, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

@Post("newpfp")
// 这里的参数改成和前端FormData里的文件key一致：'pfp'
@UseInterceptors(FileInterceptor('pfp'))
newPfp(
  // 接收普通表单字段（比如userid）
  @Body() uploadpfpdto: UploadPFPDto,
  // 接收上传的文件
  @UploadedFile() file: Express.Multer.File
){
  console.log('用户ID:', uploadpfpdto.userid);
  console.log('上传的文件详情:', file);
}

另外，确保你的NestJS项目已经安装了@nestjs/platform-express和multer（这两个是默认依赖，若缺失可手动执行npm install @nestjs/platform-express multer安装）。

额外注意事项 #

如果遇到跨域报错，记得在NestJS的main.ts里开启CORS：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 开启跨域支持
  app.enableCors();
  await app.listen(3000);
}
bootstrap();

这样修改之后，你应该就能在后端正常拿到用户ID和上传的文件数据啦！

备注：内容来源于stack exchange，提问作者DjAlms