ExpressJS multer

ExpressJS multer

form 태그 속성이 multipart/form-data 본문을 해석

- multer 함수 호출

- multer 자체가 미들웨어라기보다 multer 함수안에 4개의 미들웨어가 있음

- 실제 운영 시에는 서버 디스크 대신에 S3같은 스토리지 서비스(클라우드)에 저장

 

- 클라이언트 요청(single)
<form action="/upload" method="post" 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>
  const $form = document.querySelector("form");

  $form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("image", e.target.image.files[0]);
    formData.append("title", e.target.title.value);
    axios.post("/upload", formData);
  })
</script>

- 클라이언트 요청(fields)
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image1">
    <input type="file" name="image2">
    <input type="file" name="image3">
    <input type="text" name="name">
    <button type="submit">전송</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const $form = document.querySelector("form");

$form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("image1", e.target.image1.files[0]);
  formData.append("image2", e.target.image2.files[0]);
  formData.append("image3", e.target.image3.files[0]);
  axios.post("/upload", formData);
})
</script>

- 서버 응답
const fs = require("fs").promises;
const path = require("path");
const multer = require("multer");

- 폴더 생성
fs.readdir("uploads")
  .then((req, res, next) => {
  })
  .catch((err) => {
    console.log(err);
    fs.mkdir("uploads");
  })
  
  - upload 객체 생성
  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 }
})

- post 요청 응답(single)
app.post("/upload", upload.single("image"), (req, res) => {
  console.log(req.file, req.body.title);
  res.send("업로드 완료");
})

- post 요청 응답(fields)
app.post("/upload", upload.fields([{ name: "image1"}, { name: "image2"}, { name: "image3" }]), 
  (req, res) => {
    console.log(req.files.image1, req.files.image2, req.files.image3);
    res.send("업로드 성공");
})