Nest.js (8) Multer를 이용한 이미지 업로드

더 나은 타입안전을위해 multer 타입선언

npm i -D @types/multer

Multer는 인터셉터를 사용해서 구현을 한다
단일파일

단일파일을 업로드하려면 FileInterceptor() 인터셉터를 라우트 핸들러에 연결하고 @UploadedFiled() 데코레이터를 사용하여 request에서 file을 추출하면 됩니다.

  @ApiOperation({ summary: '업로드 테스트' })
  @UseInterceptors(FileInterceptor('image', multerOptions('images')))
  @Post('upload')
  uploadtest(@UploadedFile() file: Express.Multer.File) {
    console.log(file)
  }

(fileInterCeptor에서 지정되지않은 FromData들은 req.body에 들어간다)

• 다중파일이면 files,하고 retrun값을 배열로 바꾼다.

  @Post('upload')
  @UseInterceptors(FilesInterceptor('image'))
  uploadFile(@UploadedFiles() files: Array<Express.Multer.File>) {
    console.log(files);
  }

module.ts

모듈에 multer 모듈을 import한다

  MulterModule.register({
        dest:'./upload'    //저장 경로
      })

Multer config

Multer의 설정을 작성한다.

import * as multer from 'multer';
import * as path from 'path';
import * as fs from 'fs';
import { MulterOptions } from '@nestjs/platform-express/multer/interfaces/multer-options.interface';

const createFolder = (folder: string) => {
try {
 console.log('Create a root uploads folder...');
 fs.mkdirSync(path.join(__dirname, '..', 'uploads')); //폴더없으면 만들기
} catch (err) {
 console.log('The folder already exists...');
}
try {
 console.log(`Create ${folder} uploads folder...`);
 fs.mkdirSync(path.join(__dirname, '..', `uploads/${folder}`));
} catch (err) {
 console.log(`${folder} 있음`);
}
};

const storage = (folder: string): multer.StorageEngine => {
createFolder(folder);
return multer.diskStorage({
 //디스크에
 destination(req, file, done) {
   //어디에 저장할지
   const folderName = path.join(__dirname, '..', `uploads/${folder}`);
   done(null, folderName);
 },
 filename(req, file, done) {
   //어떤이름으로 올릴지
   const ext = path.extname(file.originalname); //확장자
   const fileName = `${path.basename(
     file.originalname,
     ext,
   )}${Date.now()}${ext}`;
   done(null, fileName);
 },
});
};

export const multerOptions = (folder: string) => {
const result: MulterOptions = {
 storage: storage(folder),
 limits: { fieldSize: 20 * 1024 * 1024 },
};
return result;
};

잠깐 express로 multer를 사용했을때와 비교해보자

express------------------------
try {
  fs.accessSync('uploads'); //디렉터리 접근
} catch (error) {
  fs.mkdirSync('uploads')  //없으면 디렉터리생성
}

const upload = multer({
  storage: multer.diskStorage({  //디스크에
    destination(req, file, done) {   //파일경로
      done(null, 'uploads')  
    },
    filename(req, file, done) {             //파일명
      const ext = path.extname(file.originalname); // 오리지널 네임의 확장자 추출
      const basename = path.basename(file.originalname, ext);  //오리지널네임+확장자
      done(null, basename + '_' + new Date().getTime() + ext);  //에러처리, 파일명항목(베이스네임+날짜+확장자)
    },
  }),
  limits: { fileSize: 20 * 1024 * 1024 }, //20MB
})

보다싶이 거의 비슷하다.