NestJS中如何在单次HTTP请求同时上传JSON数据与文件？

你的请求存在几个关键错误，修正后即可正常工作： #

1. 修正Content-Type #

正确的multipart表单类型是multipart/form-data，不是multipart/data，同时要确保boundary值和请求中的分隔符完全一致。

2. 统一边界符格式 #

每个表单块的分隔符是--加上boundary值，结束块是--+boundary值+--，注意横杠数量必须统一。

3. 调整JSON数据的传递方式 #

NestJS默认不会自动解析名为application/json的form-data字段，你可以选两种处理方式：

• 方式一：将JSON对象拆分为单独的form字段（更简单，后端无需额外配置）
• 方式二：保留完整JSON块，后端配置自定义解析逻辑（适合复杂数据结构）

4. 修正文件引用格式 #

VSCode REST Client插件中，引用本地文件需要用< @文件路径的格式，不是< 文件路径（缺少@符号）。

修正后的请求示例（方式一：拆分JSON为单独字段） #

POST http://localhost:3344/api/users/register HTTP/1.1
Accept: application/json
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

Mark
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="email"

trainer6@gmail.com
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="password"

abcdefg
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="gender"

Male
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="role"

Trainer
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="birthDate"

2002-02-02
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="level"

Professional
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="trainingType"

Box
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="certificate"

certificate2.pdf
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="personalTraining"

true
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="test.png"
Content-Type: image/png

< @/Desktop/test.png
----WebKitFormBoundary7MA4YWxkTrZu0gW--

修正后的请求示例（方式二：保留JSON块） #

如果需要传递完整JSON对象，请求调整如下，同时后端要配置对应解析逻辑：

POST http://localhost:3344/api/users/register HTTP/1.1
Accept: application/json
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="user"
Content-Type: application/json

{
  "name": "Mark",
  "email": "trainer6@gmail.com",
  "password": "abcdefg",
  "gender": "Male",
  "role": "Trainer",
  "birthDate": "2002-02-02",
  "level": "Professional",
  "trainingType": "Box",
  "certificate": "certificate2.pdf",
  "personalTraining": "true"
}

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="avatar"; filename="test.png"
Content-Type: image/png

< @/Desktop/test.png
----WebKitFormBoundary7MA4YWxkTrZu0gW--

后端对应配置（方式二） #

在NestJS控制器中，需要同时处理文件和JSON字段：

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

@Controller('api/users')
export class UsersController {
  @Post('register')
  @UseInterceptors(FileInterceptor('avatar'))
  async register(
    @UploadedFile() avatar: Express.Multer.File,
    @Body('user') user: string // 接收JSON字符串，手动解析为对象
  ) {
    const userData = JSON.parse(user);
    // 处理用户数据和头像文件
    return { user: userData, avatar: avatar.filename };
  }
}

额外注意事项 #

• 确保NestJS项目已安装@nestjs/platform-express和multer依赖
• 若需持久化存储文件，需配置multer的自定义存储路径（默认存储在系统临时目录）

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