NestJS中头像上传后无法正常渲染的问题求助

问题根源 #

1. 文件无扩展名：默认的FileInterceptor会生成无扩展名的随机文件名，导致浏览器、静态服务无法识别文件的MIME类型（如JPEG）。
2. 响应头缺失：使用StreamableFile返回文件时，未指定正确的Content-Type响应头，浏览器将二进制数据解析为文本，显示乱码。

解决方案 #

1. 修改上传配置，保留文件扩展名 #

自定义文件存储策略，从原始文件名中提取扩展名，确保存储的文件带有正确后缀：

// ./src/controllers/user-profile.controller.ts
import { Controller, Post, Param, UseInterceptors, UploadedFile, ParseIntPipe } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { extname } from 'path';

@Controller('user-profile')
export class UserProfileController {
    @Post('/:id/upload-photo')
    @UseInterceptors(FileInterceptor('image', {
      storage: diskStorage({
        destination: './uploads',
        // 自定义文件名：随机字符串 + 原扩展名
        filename: (req, file, callback) => {
          const randomName = Array(32).fill(null).map(() => Math.round(Math.random() * 16).toString(16)).join('');
          callback(null, `${randomName}${extname(file.originalname)}`);
        },
      }),
    }))
    uploadSinglePhoto(
        @Param('id', ParseIntPipe) id: number,
        @UploadedFile() image
    ) {
        console.log('===> ', image);
        return this.userProfileService.saveUserProfilePhotoLocation(id, image.path);
    }

    // ... 其他方法
}

2. 修复图片获取接口，正确返回响应头 #

有两种可选方案：

方案一：直接利用静态文件服务（更简洁）

既然已在main.ts配置静态文件服务，直接返回文件的访问URL即可，无需手动读取流：

@Get('/:id/profile-photo')
async getUserProfilePhoto(@Param('id', ParseIntPipe) id: number) {
  const userProfile = await this.userProfileRepostory.findOneBy({ id });
  // 返回静态文件的访问路径，示例：http://localhost:3000/uploads/xxx.jpg
  return {
    photoUrl: `${process.env.BASE_URL || 'http://localhost:3000'}/${userProfile.photo}`
  };
}

方案二：使用StreamableFile并设置响应头

如果需要手动控制文件流，需指定Content-Type和可选的Content-Disposition：

import { Response } from 'express';
import { createReadStream, StreamableFile } from '@nestjs/common';
import { join, extname, basename } from 'path';

@Get('/:id/profile-photo')
async getUserProfilePhoto(
  @Param('id', ParseIntPipe) id: number,
  @Res({ passthrough: true }) res: Response
): Promise<StreamableFile> {
  const userProfile = await this.userProfileRepostory.findOneBy({ id });
  const filePath = join(process.cwd(), userProfile.photo);
  const fileStream = createReadStream(filePath);
  
  // 根据文件扩展名设置Content-Type
  const ext = extname(filePath).toLowerCase();
  const contentType = ext === '.jpg' || ext === '.jpeg' ? 'image/jpeg' : 'image/png'; // 可扩展支持其他图片类型
  
  res.set({
    'Content-Type': contentType,
    'Content-Disposition': `inline; filename="${basename(filePath)}"` // inline表示浏览器直接渲染，attachment则触发下载
  });
  
  return new StreamableFile(fileStream);
}

3. 验证数据库存储路径 #

确保userProfile.photo存储的是相对路径（如uploads/xxx.jpg），且与静态服务的配置路径一致。

额外说明 #

• 静态文件服务配置已正确，只需确保存储的文件带有扩展名，就能通过http://localhost:3000/uploads/文件名直接访问图片。
• 若需限制文件类型、大小，可在FileInterceptor配置中添加fileFilter和limits选项。

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