multer란 파일 업로드를 위해 사용되는 multipart/form-data 형식을 다루기 위한 노드 모듈이다.
multer 함수를 호출하면 4가지의 미들웨어가 들어있는 객체가 리턴된다.
"express": "^4.18.2",
"multer": "^1.4.4"
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"), "번 포트에서 대기 중");
});
<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>
<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>
<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>
<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/