7. 익스프레스 (1) - 미들웨어 [10] : multer 1

 

 

 

multer는 다소 사용법이 어렵지만, 이미지나 영상 등의 파일을 업로드하는 미들웨어로 활용도가 매우 높습니다. multer는 "멀티파트" 형식으로 여러가지 포맷의 파일을 업로드할 때 사용하는 미들웨어입니다. 

 

여기서 멀티파트 형식은, 아래 html과 같이 enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식을 의미합니다.

 

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image" />
    <input type="text" name="title" />
    <button type="submit">업로드</button>
</form>

 

 

 

이러한 폼을 통해 업로드하게 되는 파일은, body-parser로는 처리가 어렵고 직접 파싱하기도 어렵습니다. 이런 경우에 multer를 사용하게 됩니다. 

 

우선 해당 파일이 있는 폴더에서 multer 패키지를 설치해보겠습니다. 

 

$ npm i multer

 

 

 

---

 

 

파일이 아닌 예제 코드를 살펴보면서 하나씩 설명해 보겠습니다. 

 

const multer = require('multer');

const upload = multer({
    storage: multer.diskStorage({
        destination(req, file, done) {
            done(null, 'uploads/');
        },
        filename(req, file, done) {
            const ext = path.extname(file.originalname);
            done(null, path.basename(file.originalname, ext) + Date.now() + ext);
        },
    }),
    limits: { fileSize: 5 * 1024 * 1024},
});

 

 

- multer 함수에 인수로 설정을 집어넣어 줍니다. multer의 인수 { } 안에 크게 storage와 limits가 존재합니다. 

 

- 우선 storage 속성에서는, multer.diskStorage 안에 destination과 filename을 설정했습니다. 이는 어디(destination)에 어떤 이름(filename)으로 저장할지를 설정하는 개념입니다. 

 

- destination과 filename 함수의 req 매개변수에는 요청에 대한 정보가 들어갑니다.

- destination과 filename 함수의 file 객체에는 업로드한 파일에 대한 정보가 들어갑니다. 

- destination과 filename 함수의 done 매개변수는 함수입니다. 

 

- req에는 에러가 있으면 에러를 넣고, file에는 실제 경로나 파일 이름을 넣어줍니다. req나 file의 데이터를 가공하여 done으로 넘겨주는 구조입니다. 

 

* 이어서 살펴보겠습니다.