File Upload

1. Html multer 적용
2. Middleware 정의 - router에서 middleware 사용: html에서 받아온 file을 middleware에서 정한 설정에 따라 uploads 폴더에 저장한 후 다음 middleware로 file 정보를 전달 (req.file 이용)
3. DB 및 세션에 저장
4. Static files serving (img 파일 등을 브라우저에 노출)

++) 문제 – 서버에 파일을 저장하는 문제

1. File Input

• HTML의 file input을 저장하고 req.file에 저장하기 위해 multer 패키지를 사용
• 설치 npm I multer
• 구현

form(method="POST", enctype="multipart/form-data")
        label(for="avatar") Avatar
        input(type="file", id="avatar", name="avatar", accept="image/*")

2. Middleware

• html에서 받아온 file에 대한 설정
• dest: destination, 저장할 폴더를 지칭
• 다음 middleware로 file 정보를 req.file에 담아서 전달
• 구현

export const uploadFiles = multer({
  dest: "uploads/",
});

.post(uploadFiles.single("avatar"), postEdit);

3. DB 및 Session 저장

const updatedUser = await User.findByIdAndUpdate(
    _id,
    {
      avatarUrl: file ? file.path : avatarUrl,
      name,
      email,
      username,
      location,
    },
    { new: true }
);	
req.session.user = updatedUser;

4. File static 설정

• 이렇게 저장된 파일은 html에서 “localhost:400/file_path” 경로로 불러온다.
• Express.static() 함수를 사용하여 폴더를 전역으로 선언
• 해당 path를 폴더를 통해 접근이 가능하게 함
• 구현

app.use("/uploads", express.static("uploads"));

5. 남아 있는 문제..

• 파일은 서버에 저장하면 좋지 않다.
  • 서버를 끄면 파일의 손실
  • 서버가 2개일 경우 파일의 공유에 대한 문제
  • 업데이트 마다 무중단 배포를 구현해야 함
• DB에는 파일의 경로만 저장한다 !