multer

multer

---

multer란 파일 업로드를 위해 사용되는 multipart/form-data 형식을 다루기 위한 노드 모듈이다.

 

multer middleware

---

multer 함수를 호출하면 4가지의 미들웨어가 들어있는 객체가 리턴된다.

• single : 하나의 파일을 업로드
• array : 하나의 요청에 여러 파일이 있는 경우
• fields : 여러 요청에 하나 또는 여러 파일이 있는 경우
• none : 파일 업로드X
  

 

code

---

version

"express": "^4.18.2",
"multer": "^1.4.4"

app.js

const express = require("express");
const multer = require("multer");
const fs = require("fs");
const path = require("path");

const app = express();

app.set("port", process.env.PORT || 3000);

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

try {
  fs.readdirSync("uploads");
} catch (error) {
  console.error("uploads 폴더가 없어 uploads 폴더를 생성합니다");
  fs.mkdirSync("uploads");
}

app.get("/uploads/single", (req, res) => {
  res.sendFile(path.join(__dirname, "multipartSingle.html"));
});
app.get("/uploads/array", (req, res) => {
  res.sendFile(path.join(__dirname, "multipartArray.html"));
});
app.get("/uploads/fields", (req, res) => {
  res.sendFile(path.join(__dirname, "multipartFields.html"));
});
app.get("/uploads/none", (req, res) => {
  res.sendFile(path.join(__dirname, "multipartNone.html"));
});

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 },
});

// single //
app.post("/upload/single", upload.single("image"), (req, res) => {
  console.log("req.body.title:", req.body.title);
  console.log("req.file:", req.file);
  res.send(req.body.title);
});

// array //
app.post("/upload/array", upload.array("image", 3), (req, res) => {
  console.log("req.body.title:", req.body.title);
  console.log("req.file:", req.files);
  res.send(req.body.title);
});

// fields //
app.post(
  "/upload/fields",
  upload.fields([
    { name: "image1", maxCount: 1 },
    { name: "image2", maxCount: 2 },
    { name: "image3", maxCount: 1 },
  ]),
  (req, res) => {
    console.log("req.body.title:", req.body.title);
    console.log("req.file:", req.files); // req.files.image1, req.files.image2
    res.send(req.body.title);
  }
);

// none //
app.post("/upload/none", upload.none(), (req, res) => {
  console.log("req.body.title:", req.body.title);
  res.send(req.body.title);
});

app.listen(app.get("port"), () => {
  console.log(app.get("port"), "번 포트에서 대기 중");
});

multipartSingle.html

<form id="form" enctype="multipart/form-data">
  <input type="file" name="image" />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.getElementById("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!e.target.title.value) {
      alert("텍스트를 입력하세요");
      return;
    }
    const formData = new FormData();
    formData.append("image", e.target.image.files[0]);
    formData.append("title", e.target.title.value);
    axios.post("/upload/single", formData).then((res) => {
      e.target.reset();
      console.log("성공");
      console.log("res.data:", res.data);
    });
  });
</script>

multipartArray.html

<form id="form" enctype="multipart/form-data">
  <input type="file" name="image" multiple />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.getElementById("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!e.target.title.value) {
      alert("텍스트를 입력하세요");
      return;
    }
    const formData = new FormData();
    formData.append("image", e.target.image.files[0]);
    formData.append("image", e.target.image.files[1]);
    formData.append("image", e.target.image.files[2]);
    formData.append("title", e.target.title.value);
    axios
      .post("/upload/array", formData)
      .then((res) => {
        e.target.reset();
        console.log("성공");
        console.log("res.data:", res.data);
      })
      .catch((err) => {
        console.log("error");
      });
  });
</script>

multipartFields.html

<form id="form" enctype="multipart/form-data">
  <input type="file" name="image1" />
  <input type="file" name="image2" multiple />
  <input type="file" name="image3" />
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.getElementById("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!e.target.title.value) {
      alert("텍스트를 입력하세요");
      return;
    }
    const formData = new FormData();
    formData.append("image1", e.target.image1.files[0]);
    formData.append("image2", e.target.image2.files[0]);
    formData.append("image2", e.target.image2.files[1]);
    formData.append("image3", e.target.image3.files[0]);
    formData.append("title", e.target.title.value);
    axios.post("/upload/fields", formData).then((res) => {
      e.target.reset();
      console.log("성공");
      console.log("res.data:", res.data);
    });
  });
</script>

multipartNone.html

<form id="form" enctype="multipart/form-data">
  <input type="text" name="title" />
  <button type="submit">업로드</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  document.getElementById("form").addEventListener("submit", (e) => {
    e.preventDefault();
    if (!e.target.title.value) {
      alert("텍스트를 입력하세요");
      return;
    }
    const formData = new FormData();
    formData.append("title", e.target.title.value);
    axios.post("/upload/none", formData).then((res) => {
      e.target.reset();
      console.log("성공");
      console.log("res.data:", res.data);
    });
  });
</script>

 

출처

조현영, ⌜Node.js 교과서⌟, 길벗, 2022, 6.2.7 multer
https://thebook.io/080334/0278/