[Node.js]이미지 업로드 및 저장

in Study on node.js


Node.js로 API서버를 구축하던 중에 이미지 업로드 기능을 구현해야 해서 관련 자료를 정리해보았다.

우선 웹프레임워크로 express.js를 쓰고 있지만 express안에 파일 저장 기능이 없기 때문에 multer라는 모듈을 써볼 예정이다.

multer

npm install --save multer

사용법은 간단하다

const multer = require('multer')
const upload = multer({dest: 'images/'}) //dest : 저장 위치

router.post('/upload',upload.single('img'),(req,res) => {
    res.json(req.file)
    console.log(req.file)
})

dest라는 것을 통해 저장 위치를 설정할 수 있는데 여기서 시간을 많이 잡아먹었다. 분명 routes 폴더에 저장하려햇는데 파일이 생성되지 않는 것이다. 그래서 삽질을 해본 결과 root 경로로부터 시작하는 것을 뒤늦게 알았다.

다음과 같이 설정하면 upload.single('img') 라는 미들웨어를 통과하면서 저장을 하는데 form안의 name이 ‘img’인 파일을 인식하여 저장한다.
그리고 해당 파일에 대한 정보는 req.file안에 담기게된다.

실행하고 console에 담긴 정보를 확인하면

{ 
  fieldname: 'img',
  originalname: 'ffefe.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: './images',
  filename: 'ffefe.png',
  path: 'images\\ffefe.png',
  size: 128427 
}

파일 정보를 확인할 수 있고

파일이 저장된것을 확인 할 수 있다.

확장

또한 파일 명이나 경로를 수정하고 싶은 경우 다음과 같이 수정하면된다.

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null,'./images') // cb 콜백함수를 통해 전송된 파일 저장 디렉토리 설정
    },
    filename: function (req, file, cb) {
      cb(null, file.originalname) // cb 콜백함수를 통해 전송된 파일 이름 설정
    }
  })

const upload = multer({storage: storage})