npm i multer
form에 enctype="multipart/form-data"을 써줘야함.
input에 file을 가져올때 accept="image/*을 써줘야 이미지 파일이 아닌 다른 파일을 업로드하지 못하게 막을 수 있음.
input(type="file", id="avatar", name="avatar", accept="image/*")
export const uploadFile = multer({ dest: 'uploads/' })을 middleware 파일에 저장한다.
dest: "uploads/"는 user에게 form으로 받은 file정보가 uploads라는 파일 밑에 저장된다는 뜻이다.
따라서 uploads라는 파일을 만들어주어야 한다. (위 코드작성시 알아서 uploads파일이 만들어 지기는 한다.)
uploadFile middleware을 쓸곳에 import한후 middleware으로 넣어준다.
userRouter
.route("/edit")
.all(protectedMiddleware)
.get(getEdit)
.post(uploadFile.single("avatar"), postEdit);
위 middleware을 작성하면 req.file을 사용할 수 있다.
export const postEdit = (req, res) => {
const {file} = req;
console.log(file);
}
{
fieldname: 'avatar',
originalname: '7B629FCD-E340-46E6-A801-D65B357DF7C8.jpeg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: '4ad5113a7819a1cec775e3ef9b61b1d9',
path: 'uploads/4ad5113a7819a1cec775e3ef9b61b1d9',
}
export const postEdit = async (req, res) => {
const pagetitle = "Edit Profile";
const {
session: {
user: { _id, avatarUrl },
},
body: { name, email, username, location },
file,
} = req;
if (req.session.user.email !== email) {
const existEmail = await User.exists({ email });
if (existEmail) {
return res.status(400).render("edit-profile", {
pagetitle,
errorMessage: "이미 있는 이메일 입니다.",
});
}
}
if (req.session.user.username !== username) {
const existUsername = await User.exists({ username });
if (existUsername) {
return res.status(400).render("edit-profile", {
pagetitle,
errorMessage: "이미 있는 username 입니다.",
});
}
}
const updateUser = await User.findByIdAndUpdate(
_id,
{
avatarUrl: file ? file.path : avatarUrl,
name,
email,
username,
location,
},
{ new: true }
);
req.session.user = updateUser;
return res.redirect("/users/edit");
};
밑의 코드로 인해 브라우저가 서버에있는 uploads폴더에 접근 할 수 있음.
누군가 만약 /uploads로 가려고 한다면, uploads폴더의 내용을 보여주는 코드
app.use("/uploads", express.static("uploads"));
if loggedInUser.avatarUrl.startsWith("upload")
img(src=`/${loggedInUser.avatarUrl}`,width="100",height="100")
if loggedInUser.avatarUrl.startsWith("http")
img(src=loggedInUser.avatarUrl,width="100",height="100")
multer 을 사용하여 video upload하기
export const videoUpload = multer({
dest: "uploads/videos/",
limits: {
fileSize: 20000000,
},
});
videoRouter
.route("/upload")
.all(protectedMiddleware)
.get(getUpload)
.post(videoUpload.single("video"), postUpload);
export const postUpload = async (req, res) => {
const {path: fileUrl} = req.file;
const { title, description, hashtags } = req.body;
try {
await Video.create({
title,
description,
fileUrl,
hashtags: Video.formatHashtags(hashtags),
});
return res.redirect("/");
} catch (error) {
return res.status(400).render("upload", {
pageTitle: `Upload Video`,
errorMessage: error._message,
});
}
};
/${video.fileUrl}
, controls)문제점