(Node.js) 업로드 이미지 리사이징

https://developerjjh.tistory.com/74

(Node.js) multer

 

● 순서

---

1. 요지
2. 라이브러리 설치
3. sharp 설정 및 적용 코드
4. 마무리

 

1. 요지

• multer 라이브러리 통해서 서버에 파일을 업로드할 수 있다
• 그중 이미지를 업로드하는 과정에서 만약에...
• 특정 유저가 이미지에 대한 크기, 너비, 높이 등 감당할 수 없는 스케일의 사진을 업로드를 한다면...?
  • 라이브러리에서의 기본 설정에는 제한이 없지만,
    프로젝트의 방향성이나 기획에서 그리고 서버를 구축함에 있어서 메모리를 생각한다면....
• 이에 이미지 파일의 크기를 제한하고 제한된 이미지 중 리사이징이 가능하다면 조절해보자..!

 

2. 라이브러리 설치

npm i sharp

 

 

3. sharp 적용 코드

• • 다행히..? import 정도만 해주면 추가적인 설정 없이 리사이징 관련 메서드를 사용하면 된다

3-1. userService.ts

// userService.ts
import sharp from 'sharp';

// .. 이하 생략 ..

// 단순하게 multer.uploader를 single로 전제 하였다.
 const { filename } = req.profile;

let selectImg: Buffer;

const uploadImgs = fs.readdirSync(UPLOAD_PATH);

uploadImgs.forEach((imgName) => {
	if (imgName === filename)
    selectImg = fs.readFileSync(UPLOAD_PATH + filename);
});

// sharp 메서드로 확인하고 하는 이미지의 버퍼값을 넘겨서 metadata에 접근한다
const temp = await sharp(selectImg).metadata();

// 이미지의 너비가 500 보다 크다면 리사이징 한다고 가정해서
// 해당 이미지의 너비를 300으로 설정해준다.
if (temp.width > 500) {
	const tempPath = path.join('upload', `resized-${filename}`);
	await sharp(profile.path) // 바꿀 이미지의 주소
	.resize({ width: 300 }) // 리사이징 하고자 하는 너비
	.withMetadata() // 기존 이미지의 메타데이터를 유지
	.toFile(tempPath); // 리사이징할 이미지 파일을 원하는 주소에 저장

// 리사이징한 이미지를 기존 원본이미지랑 별도로 두지 않고 덮어쓴다.
fs.rename(tempPath, profile.path, (err) => {
	if (err) throw err;
	});
}
// .. 이하 생략 ..

 

3-2. multer.setting

const uploader = multer({
  storage,
  limits: { fileSize: '원하는 사진의 크기(숫자)' },
  fileFilter: (_, file, cb) => {
    if (
      file.mimetype !== 'image/png' &&
      file.mimetype !== 'image/jpg' &&
      file.mimetype !== 'image/jpeg'
    ) {
      cb(null, false);
      return cb(new Error('지원되지 않는 이미지 확장자 입니다.'));
    } else cb(null, true);
  },
});

• 업로드를 지원하는 multer 라이브러리의 설정

 

 

4. 마무리

• 특정 유저가 내 정보 보기에서 본인의 프로필 이미지를 적용할 수 있는 기능을 한다고 했을 때
  • 변경하고자 하는 이미지의 크기를 제한할 것인가?
  • 너비 및 높이 또한 제한할 것인가?
  • 제한이라고 하면 접근자체가 안되게 할 것인지... 아니면 리사이징을 해줄지
• 라는 고민을 하고 있다가 같이 일하는 기획자의 방향에 따라 좋은 경험을 할 수 있었다
• 시간적 여유가 있었으면 공부하다가 찾아봤을 텐데... 없어서 넘어갈 뻔했지만 다행