Nestjs 图片上传-多图片字段

Question

我正在尝试在我的项目中实现图像上传。如果我添加单个图像，它就可以正常工作。但在多个图像字段中出现错误

{
    "message": "Unexpected field",
    "error": "Bad Request",
    "statusCode": 400
}

 @Post('personal-details')
  @UseInterceptors(
    FileInterceptor('image_front', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-front-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
    FileInterceptor('image_back', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-back-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
    FileInterceptor('profile_image', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-profile-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
  )
  async studentPersonalData(
    @Body('email') email: string,
    @Body() personalDetailsDto: personalDetailsDto,
    @UploadedFile() imageFront,
    @UploadedFile() imageBack,
    @UploadedFile() profileImage,
  ) {
    try {
      const imageFrontFilename = imageFront ? imageFront.filename : null;
      const imageBackFilename = imageBack ? imageBack.filename : null;
      const profileImageFilename = profileImage ? profileImage.filename : null;
      
      console.log('Image front filename:', imageFrontFilename);
      console.log('Image back filename:', imageBackFilename);
      console.log('Profile image filename:', profileImageFilename);
      console.log('Email:', email);
      console.log('Personal details:', personalDetailsDto);
  
      
      const result = await this.userService.dataPersonalDet(email, {
        ...personalDetailsDto,
        image_front: imageFrontFilename,
        image_back: imageBackFilename,
        profile_image: profileImageFilename,
      });
  
      return result;
    } catch (error) {
      console.error("Error processing personal data:", error);
      throw new BadRequestException("Failed to process personal data");
    }
  }
  

这就是代码。我正在学习nestjs，请帮忙。

我正在尝试使用 Nestjs 添加图像。像其他领域一样，我也想添加图像。我正在使用mysql。

Answer 1

[https://docs.nestjs.com/techniques/file-upload][阅读本文，您需要的类型在这里]

Answer 2

您应该使用

FileFieldsInterceptor

，而不是使用多个拦截器。这允许在不同字段下发送多个文件，就像您想要做的那样。那看起来像

@Post('personal-details')
  @UseInterceptors(
    FileInterceptor([
      {
        name: 'image_front',
        maxCount: 1,
      },
      {
        name: 'image_back',
        maxCount: 1,
      },
      {
        name: 'profile_image',
        maxCount: 1,
      },
      ], {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-front-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
  )
  async studentPersonalData(
    @Body('email') email: string,
    @Body() personalDetailsDto: personalDetailsDto,
    @UploadedFiles() {
      image_front: imageFront,
      image_back: imageBack,
      profile_image: profileImage
    }: { 
      image_front: Express.Multer.File[];
      image_back: Express.Multer.File;
      profile_image: Express.Multer.File[]
    }
  ) {
    ...
  }