multer로 저장한 이미지를 프론트로 받아오고 싶습니다!

Question

앞 단은 react,뒷 단은 nest 사용하고 있습니당 간단한 avatar image를 업로드하고 불러오는 작업을 하는 중입니다.현재까지 multer를 사용하여 뒷 단 avatar 폴더에 저장하는 것까지 완성한 상태입니다.. 이제 이걸 그대로 다시 요청해서 뷰에 그리는 것만 남았는데...여기서 탁 막혀버렸네요...SSR에선 static(__dirname, .....) 으로 간단히 해결되던게, 클라랑 서버랑 분리하니까 또 완전히 다른 세계네요..(선배님들 정말 대단하십니다..😭)간단히 코드 보여드릴게요. **main.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(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, ) {} // 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(); } 앞 단 코드는 필요하지 않으실 것 같아서 첨부하지 않겠습니다.. avatar 폴더에 잘 들어가 있는 이미지 입니다... 쟤를 진짜 데려 오고 싶네요. 클라와 서버는 다른 포트를 사용하고 있습니다! 매번 도움만 청해서 정말 죄송합니다. 🙇🏻

notanumber · Accepted Answer

저장된 폴더와 파일명을 업로드하고 response로 파일명을 json형태로 내려보내준담에 img태그 src에 경로 넣으면 되지 않을까요?

수선과법선 · Answer

&#64;notanumber해결했습니다! static 설정만으로도 폴더에 url로 접근 가능하더라구요!

multer로 저장한 이미지를 프론트로 받아오고 싶습니다!

2개의 답변

Q&A 목록