9. Node.js Multer 이미지 업로드

자! 여러분! 효근이에요!

이번 글은 Multer 모듈을 사용한 이미지 업로드를 작성하겠습니다. 

npm install multer
yarn add multer

먼저 root에 public 폴더를 만들어준 뒤, path 모듈을 설치합니다.

npm install path
yarn add path

app.use(express.static(path.join(__dirname, 'public')));

app.use를 사용하여 public 폴더를 url의 루트로 설정했습니다.

public 폴더 안에 image.jpg가 있다면, 저걸 사용함으로써

localhost:3000/image.jpg 로 접근할 수 있죠.

var multer = require('multer');
var randomstring = require('randomstring');
var path = require('path');

const imageUpload = multer({
	storage: multer.diskStorage({
		destination: (req, file, cb) => {
			cb(null, `${__dirname}/../public`); // public 폴더를 지정합니다.
		},
		filename: (req, file, cb) => {
			var fileName = randomstring.generate(25); // 파일 이름입니다. 저는 랜덤 25자로 설정했습니다.
			var mimeType;
			switch (file.mimetype) { // 파일 타입을 거릅니다.
				case 'image/jpeg':
					mimeType = 'jpg';
					break;
				case 'image/png':
					mimeType = 'png';
					break;
				case 'image/gif':
					mimeType = 'gif';
					break;
				case 'image/bmp':
					mimeType = 'bmp';
					break;
				default:
					mimeType = 'jpg';
					break;
			}
			cb(null, fileName + '.' + mimeType); // 파일 이름 + 파일 타입 형태로 이름을 바꿉니다.
		},
	}),
	limits: {
		fileSize: 5 * 1024 * 1024, // 크기제한입니다. 기준은 byte 입니다.
	},
});

파일을 받아, public에 저장하며 파일 정보를 반환합니다.

app.post('/image', imageUpload.single('image'), (req, res) => {
	return res.status(200).json(req.file.filename);
});

사용법은 간단하게도 이렇게 끝입니다.

요청에 대한 응답 콜백 함수를 열기 전, 미들웨어로 이미지를 받아 처리하여 req.file에 이미지를 할당합니다.

postman에서 form-data를 사용하여 파일을 보낼 수 있습니다.

key는

imageUpload.single(키)

키 라고 쓰여진 곳에 있는 문자열과 동일하면 됩니다.

imageUplad.array(키)

를 사용하여, 여러 장도 받을 수 있습니다.

이상으로 글을 마치겠습니다.