Multer
파일을 업로드할 수 있게 도와주는 모듈
Procedure
전제사항 : 미들웨어 설정하기
-
express.urlencoded 미들웨어 설정하기
"Content-Type: application/x-www-form-urlencoded"
를 사용할 수 있게 해주는 미들웨어app.use(express.urlencoded({ extended: true }));
-
express.static 미들웨어 설정하기
가상의 라우터를 생성해 특정 디렉토리와 연결할 수 있게 도와주는 미들웨어로, 브라우저에서
/${라우터}/${파일 이름}
으로 접근 시
/${디렉토리}/${파일 이름}
파일에 접근할 수 있게 한다.// 가상의 라우터 "/downloads"를 생성하고, 해당 라우터를 파일들이 저장된 폴더 "~/public/uploads"와 연결 app.use("/downloads", express.static(path.join(__dirname, "public/uploads")));
Storage 설정하기
유저가 업로드한 파일이 저장될 디렉토리를 설정한다. express.static
미들웨어에서 사용했던 디렉토리와 동일하게 설정한다.
// 디렉토리를 변수화하기
const upload_dir = "public/uploads";
// 디렉토리 변수를 이용해 Storage 설정하기
const storage = multer.diskStorage({
destination: `./${upload_dir}`,
filename: function (req, file, cb) {
// 파일 업로드 시 이름 규칙을 추가하는 callback 함수 설정하기
cb(null, path.parse(file.originalname).name + "-" + Date.now() + path.extname(file.originalname)); // 중복되는 이름의 파일을 업로드 시 파일이 덮어씌워지지 않도록 타임스탬프를 넣기
},
});
Multer 인스턴싱하기
Multer 작업을 담당하는 변수를 선언해 작업을 시작한다. 다음 단계에서 해당 변수를 이용해 미들웨어로 사용할 수 있다.
// upload라는 이름의 변수를 선언해 Multer를 실행하기
const upload = multer({ storage: storage });
업로드 기능 사용하기
라우터에 파일 업로드 기능을 추가한다. 라우터 실행 매개변수로 Multer single 함수를 전달하고, callback 함수에 적용한다.
// 첨부파일을 포함하는 게시글을 추가하기
app.post("/posts", upload.single("file"), async (req, res) => {
const { title, content, author } = req.body;
// 삼항 연산자를 이용해 request에 첨부된 파일이 있을 시에 파일 이름을 반환하는 변수 설정하기
let filename = req.file ? req.file.filename : null;
// 파일 이름에 express.static 미들웨어로 설정한 라우터 URI 추가하기
filename = `/downloads/${filename}`;
// request에서 전달받은 내용으로 Post 모델에 데이터 삽입하기
const post = await models.Post.create({
title: title,
content: content,
author: author,
filename: filename,
});
/* 이하 생략 */
});