Angular 16 上传文件至NestJS 10失败（Postman可正常运行）

你的问题出在Angular的请求代码中，两个关键错误导致文件无法被NestJS正确解析：

错误1：手动设置multipart/form-data请求头 #

发送FormData时，浏览器会自动生成带boundary的Content-Type头（格式类似multipart/form-data; boundary=----WebKitFormBoundaryXXXX）。手动设置固定的Content-Type会丢失boundary参数，导致NestJS的Multer无法识别文件分隔符，进而解析失败。

错误2：错误传递FormData参数 #

你用{...formData}展开FormData对象，这会把FormData转换成普通对象，完全破坏了FormData的结构，服务器接收不到正确的文件数据。

修改后的Angular apiService代码 #

// apiService
uploadFile(formData: FormData, id: string) {
    const params = new HttpParams().set('id', id);
    // 移除手动设置的Content-Type头，让浏览器自动处理
    // 直接传递原始FormData对象，不要展开
    return this.http.post(`${environment.server_url}/files/upload`, formData, { params });
}

额外检查项 #

1. Angular组件的FormData创建逻辑没问题，formData.append('file', file, file.name)是正确的写法。
2. 若CORS仍有异常，可给NestJS配置更明确的跨域规则：

// main.ts
app.enableCors({
  origin: 'http://localhost:4200',
  credentials: true,
});

修改后重新测试，文件即可正常上传到NestJS服务器。

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