서버/Express
ExpressJS multer
realtrynna
2022. 1. 20. 09:44
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("업로드 성공");
})