[node.js] multer와 S3를 이용한 이미지 업로드 (multer 설치 부터 S3이미지 업로드 까지) - 1. multer

서버에 이미지를 저장할 때 사용되는 모듈 multer에 대해서 알아 보겠습니다. multer의 설치와 주요 메소드 single, array, fields에 대한 예시와 s3를 사용하는 방법까지 설명할 예정입니다.

🌝 multer 설치

npm install --save multer

multer의 사용법과 상세한 설명은 공식 문서(multer - npm)를 참고하세요.

 

🌜 multer를 이용할 파일에 multer 가져오기

const multer = require('multer’); const upload = multer({ dest: 'uploads/' });

dest는 클라이언트에서 넘어온 사진을 저장할 디렉토리입니다. 저장하고 싶은 디렉토리를 적어주면 됩니다.

⭐ 메소드 1. single(fieldname) : 하나의 파일을 받아서 저장

router.post('/', upload.single('image'), (req, res) => {
 
    console.log(req.file); 
  // 클라이언트에서 넘어온 파일에 대한 정보가 req.file에 FILE 객체로 저장되어 있습니다. 

})

• upload.single('image')에서 'image'는 field명으로 클라이언트에서 지정해주는 field명을 뜻합니다. 약속된 field명을 적어주면 됩니다.
• req.file내에는 fieldname, originalname, encoding, destination, filename 등의 정보가 저장되어 있습니다.
• 성공시 dest로 지정한 'uloads/'폴더 내에 사진이 저장되는 것을 확인할 수 있습니다.
  
  

🌟 메소드 2. array(fieldname, 최대 개수) : 하나의 필드명을 가지는 여러개의 파일을 받아서 저장

router.post('/', upload.array('photos', 4), (req, res) => {

    console.log(req.files); 
    console.log(req.files[0]); // 파일의 인덱스로 접근
  // 위 single에서와 다르게 req.file이 아닌 req.files에로 넘어옵니다. 

})

🌞 메소드 3. fields([{fieldname, maxCount}, {fieldname, maxCount}, ...]) : 여러개의 필드명을 가지는 여러개의 파일을 받아서 저장

router.post('/',
	upload.fields([
      { name: 'mainImage', maxCount: 1 }, 
      { name: 'subImages', maxCount: 5 }
    ]), (req, res) => {
  
    console.log(req.files); 
    console.log(req.files['접근하려는 fieldname']); 

})

 

💨 다음 포스팅

[node.js] multer와 S3를 이용한 이미지 업로드 (multer 설치 부터 S3이미지 업로드 까지) - 2. S3