如何将后端（嵌套）文件中的 multer 图像放到我的前端（反应）上？

Posted 2023-03-11

【中文标题】如何将后端（嵌套）文件中的 multer 图像放到我的前端（反应）上？

【英文标题】：How to get multer image in backend(nest) file to on my frontend(react)?

【发布时间】：2021-10-19 08:16:18

【问题描述】：

在我的项目的用户注册表单中制作头像图像（url）时有一个问题。

前端：react.js 后端：nest.js

首先，我使用 multer 将我的头像图像保存在服务器文件夹中。然后我想将头像图像发送到我的前端，但我不知道下一步？？？？。

代码如下..

ma​​in.ts

import  ValidationPipe  from '@nestjs/common';
import  NestFactory  from '@nestjs/core';
import  NestExpressApplication  from '@nestjs/platform-express';
import * as session from 'express-session';
import * as express from 'express';
import  join  from 'path';
import  AppModule  from './app.module';

async function bootstrap() 
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.enableCors(
    origin: true,
    credentials: true,
  );

  app.use(
    session(
      secret: process.env.SESSION_SECRET,
      resave: false,
      saveUninitialized: true,
      cookie: 
        httpOnly: true,
        secure: false,
      ,
    ),
  );

  app.useGlobalPipes(
    new ValidationPipe(
      whitelist: true,
      transform: true,
      forbidNonWhitelisted: true,
    ),
  );

  app.use('/avatar', express.static(join(__dirname, '../avatar')));

  await app.listen(5000);

bootstrap();

注册码（控制器）

@Post('signup')
  @UseInterceptors(
    FileInterceptor('avatar', 
      storage: diskStorage(
        destination: Helper.destinationPath,
        filename: Helper.customFileName,
      ),
    ),
  )
  async postSignUpData(
    @UploadedFile() file: Express.Multer.File,
    @Body()
    body: UserSignDataDto,
    @Res() res: Response,
  ) 
    //
    if (file !== null) 
      body.avatar = file;
    
    //
    try 
      const result = await this.userService.signUpUserData(body);

      return res.status(200).json(
        message: 'Create new Account!',
        data: result,
      );
     catch (error) 
      return res.status(400).json(
        message: error.message,
      );
    
  

注册服务逻辑

@Injectable()
export class UsersService 
  constructor(
    @InjectModel('UserData') private userModel: Model<UserDocument>,
  ) 
  //
  async signUpUserData(signUpData: UserSignDataDto) 
    //
    const  userId, pass1, pass2, email, nickname, avatar  = signUpData;

    const checkExists: boolean = await this.userModel.exists(
      $or: [ userId ,  email ,  nickname ],
    );

    if (checkExists) 
      throw new Error(`This user id or email or nickname is already taken.`);
    

    if (pass1 !== pass2) 
      throw new Error(`Password does not match`);
    

    const user = new this.userModel(
      userId,
      password: pass2,
      email,
      nickname,
      avatarUrl: avatar ? avatar.path : 'Not Avatar',
    );

    return await user.save();
  

如何从头像文件夹中加载保存的头像图片..

如果你有合适的例子，请告诉我。

谢谢大家????

【参考方案1】：

您的服务器应配置为提供静态文件（图像和其他），并且保存在user.avatarUrl 中的 URL 应指向其中一张图像。