Multer 모듈을 이용한 파일 첨부 기능 설정하기

Multer

파일을 업로드할 수 있게 도와주는 모듈

Procedure

전제사항 : 미들웨어 설정하기

  • express.urlencoded 미들웨어 설정하기

    "Content-Type: application/x-www-form-urlencoded"를 사용할 수 있게 해주는 미들웨어

    app.use(express.urlencoded({ extended: true }));
  • express.static 미들웨어 설정하기

    가상의 라우터를 생성해 특정 디렉토리와 연결할 수 있게 도와주는 미들웨어로, 브라우저에서 /${라우터}/${파일 이름}으로 접근 시
    /${디렉토리}/${파일 이름} 파일에 접근할 수 있게 한다.

    // 가상의 라우터 "/downloads"를 생성하고, 해당 라우터를 파일들이 저장된 폴더 "~/public/uploads"와 연결
    app.use("/downloads", express.static(path.join(__dirname, "public/uploads")));

Storage 설정하기

유저가 업로드한 파일이 저장될 디렉토리를 설정한다. express.static 미들웨어에서 사용했던 디렉토리와 동일하게 설정한다.

// 디렉토리를 변수화하기
const upload_dir = "public/uploads";

// 디렉토리 변수를 이용해 Storage 설정하기
const storage = multer.diskStorage({
  destination: `./${upload_dir}`,
  filename: function (req, file, cb) {
    // 파일 업로드 시 이름 규칙을 추가하는 callback 함수 설정하기
    cb(null, path.parse(file.originalname).name + "-" + Date.now() + path.extname(file.originalname)); // 중복되는 이름의 파일을 업로드 시 파일이 덮어씌워지지 않도록 타임스탬프를 넣기
  },
});

Multer 인스턴싱하기

Multer 작업을 담당하는 변수를 선언해 작업을 시작한다. 다음 단계에서 해당 변수를 이용해 미들웨어로 사용할 수 있다.

// upload라는 이름의 변수를 선언해 Multer를 실행하기
const upload = multer({ storage: storage });

업로드 기능 사용하기

라우터에 파일 업로드 기능을 추가한다. 라우터 실행 매개변수로 Multer single 함수를 전달하고, callback 함수에 적용한다.

// 첨부파일을 포함하는 게시글을 추가하기
app.post("/posts", upload.single("file"), async (req, res) => {
  const { title, content, author } = req.body;

  // 삼항 연산자를 이용해 request에 첨부된 파일이 있을 시에 파일 이름을 반환하는 변수 설정하기
  let filename = req.file ? req.file.filename : null;

  // 파일 이름에 express.static 미들웨어로 설정한 라우터 URI 추가하기
  filename = `/downloads/${filename}`;

  // request에서 전달받은 내용으로 Post 모델에 데이터 삽입하기
  const post = await models.Post.create({
    title: title,
    content: content,
    author: author,
    filename: filename,
  });

  /* 이하 생략 */
});

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤