multer

multer란?

이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어입니다.

설치

1

npm i multer

cs

코드

클라이언트가 업로드한 이미지를 서버의 uploads 폴더에 저장하는 코드입니다.

• multipart.html

  1 2 3 4 5 6

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

  cs

• app.js

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

  //생략 const multer = require("multer"); const fs = require("fs");   try {     fs.readdirSync("uploads"); } catch (error) {     console.error("uploads 폴더가 없어 uploads 폴더를 생성합니다.");     fs.mkdirSync("uploads"); } 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 }, }); app.get("/upload", (req, res) => {     res.sendFile(path.join(__dirname, "multipart.html")); }); app.post("/upload", upload.single("image"), (req, res) => {     console.log(req.file);     res.send("ok"); });   //생략   Colored by Color Scripter

  cs

  • try - catch 구문

    • uploads라는 폴더가 있는지 검사하고, 없다면 생성합니다.

  • const upload

    • storage : 파일 저장 방식을 설정

      • destination : 파일이 저장될 경로를 지정합니다.

      • filename : 저장되는 파일의 이름을 지정합니다.

    • limits : 파일의 최대 크기를 5MB로 제한합니다.

  • app.get("/upload", (req, res) => { });

    • 사용자가 /upload 경로로 접근하면, multipart.html이라는 파일을
      응답으로 보내줍니다.

  • app.post("/upload", upload.single("image"), (req, res) => { });

    • 클라이언트가 파일을 업로드하면 이 경로로 POST 요청됩니다.