[Nest] 이미지 업로드 구현V2

• 기존의 문제
  • 이미지는 용량이큼 -> 사용자가 모두 업로드후 서버로보내면 시간이오래걸림 -> 느린사이트 -> 앱 삭제
• 해결
  • 이미지를 업로드할때 바로 temp 폴더에 업로드해버림
  • 업로드 버튼을 누르면, 업로드될 이미지를 txt로 받아서 처리함
  • 이후에 서버에서 temp에서 posts 폴더로 이미지들을 옮기면 됨.

 

* 구현

•  Multermodule을 common 모듈로 옮겨준다.

//임시파일들을 저장할 폴더
// /public/temp
export const TEMP_FOLDER_PATH = join(
  PUBLIC_FOLDER_NAME,
  TEMP_FOLDER_NAME,
)

저장위치를 temp로 바꾸면됨

@Controller('common')
export class CommonController {
  constructor(private readonly commonService: CommonService) {}

  @Post('image')
  @UseInterceptors(FileInterceptor('image')) //image key를 받아옴
  @UseGuards(AccessTokenGuard)
  postImage(
    @UploadedFile() file){ //업로드된 file 받아옴
    return{
      fileName: file.filename, //만든 파일이름만 리턴하는 api
    }
  }
}

body의 value의 file을 temp에 저장하고, 이름을 return 해줌

 

 

• dto에 image 추가 // img 이름만 보낼거임

export class CreatePostDto extends PickType(PostsModel, ['title', 'content']){
  
  @IsString()
  @IsOptional()
  image?: string;
  
}

 

 

* 문제

• getall 받을때 이미지 이름만 주지말고
• public/posts도 붙여서 받고싶다.
• FE에서 도메인(localhost:3000)만 보내면 되도록.

• entity에서 속성을 변경하려면? @transform
  • posts.entity.ts

 

@Column({
  nullable:true,
})
//img 이름 = value를 수정함.
@Transform(({value}) => value && `/${join(POST_PUBLIC_IMAGE_PATH, value)}`)
image?: string;

뭔가 unix랑 섞인 이상하게 나옴

이미지는 나오긴함

 

* 이미지 옮기기 구현

• 파일 옮기는 함수
• post service

/**
 * dto의 이미지 이름을 기반으로
 * 파일의 경로 생성
 * @param dto
 */
async createPostImage(dto : CreatePostDto){
  const tempFilePath = join(PUBLIC_FOLDER_PATH, dto.image);
  
  try{
    await promises.access(tempFilePath); //존재확인, 
  }
  catch(error){
    throw new BadRequestException('존재하지 않는 파일 입니다.' + error);
  }
  
  //파일 이름만 가져오기
  //public/temp/aaa.jpg -> aaa.jpg
  const fileName= basename(tempFilePath);
  
  const newPath = join(POST_IMAGE_PATH, fileName);
  
  // 1->2로 파일 옮김.
  await promises.rename(tempFilePath, newPath);
  
  return true;
}

• 컨트롤러

@Post()
@UseGuards(AccessTokenGuard)
async postPost(
  @User('id') userId : number,
  @Body() body : CreatePostDto,
  ){

  await this.postsService.createPostImage(body);

  return this.postsService.createPost(userId ,body, );
}

 

074 img가 실제로 posts폴더로 이동되었음