[Node.js] Using multer to upload image

이 페이지는 multer를 이용한 이미지 업로드 및 폼데이터 처리방식을 설명하고 있다.

(* 아래 코드는 React.js와 Node.js 언어로 구현되어있다)

 

# 설치

express와 함께 사용할 multer 모듈을 설치한다.

npm install multer --save

 

# React.js

multer는 multipart/form-data에서만 동작하니 주의해주세요.

const formData = new FormData();

formData.append("image", file);

Axios.post('/api/upload',
  formData, {
  	headers: {
  		'Content-Type': 'multipart/form-data'
  	}
  }
).then((res) => {
	console.log('SUCCESS!!');
}).catch((err) => {
	console.log('FAILURE!!');
});

 

# Node.js

1) 한개의 이미지 파일

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.single('image'), (req, res, next) => {
    console.log(req.file);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

 

2) 여러개의 이미지 파일 (array)

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.array('image'), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

image의 갯수를 제한시켜주려면 아래코드처럼 array에 숫자를 지정해줄 수 있다. 

3이라고 명시하면, 이미지를 3개까지만 허용하고 4개부터 ERROR!

router.post('/upload', upload.array('image', 3), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

 

3) 여러개의 이미지 파일 (any)

전달된 모든 파일을 허용하여 req.files에 저장하고, 기타 텍스트파일은 req.body에 저장한다.

const router = require('express').Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.any(), (req, res, next) => {
    console.log(req.files);
    // 이미지를 이용하는 작업 코드
});

module.exports = router;

 

! req.file 과 req.files를 이용하는 코드를 구분시켜서 명시하였으니 꼭 체크해야한다.