[웹퍼즐] 퍼즐 등록 페이지: multer

nodejs 파일 업로드 - multer 모듈 사용
JavaScript) Fetch API와 FormData

사용자가 커스텀 퍼즐을 만들기 위해선

• 퍼즐의 제목, 난이도, 이미지 파일 정보를 서버에 전송해야 한다.
• 텍스트 정보는 http message에 담으면 되지만, 파일은 어떻게 전송해야 할까? -> formData에 담아 전송한다.
• 또한 express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않는다. 따라서 모듈을 설치해서 (ex. multer) 사용자가 전송한 파일을 처리하는 작업을 해야한다.

서버에 파일 전송하기

1. <input type="file"/>에서 onChange의 event 파라미터로 이미지 파일을 가리킬 수 있다.
2. FormData 객체를 생성하여 formData.append(데이터 이름, value) 또는 formData.append(name, value, filename)으로 담는다.
3. 서버로 post 요청을 보내며 body에 formData를 담는다. Fetch API를 이용해 FormData를 보낸다면 헤더는 {}이거나 빈 값을 보내야 한다. boundary 라는 값 때문에 'application/x-www-form-urlencoded'나 'multipart/form-data', "", null 등으로 설정시 제대로 동작하지 않는다.
4. express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않는다. 따라서 모듈을 설치해서 (ex. multer) 사용자가 전송한 파일을 처리하는 작업을 해야한다.

// /api/register-puzzle/index.ts
router.post('/', multer({ storage: puzzleService.storage }).single('img'), puzzleService.registerPuzzle);


// /services/register-puzzle-service.ts
const newPuzzle = { user_id: '', image: '', title: '', keyword: '', level: 1 };

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'public/');
  },
  filename: async (req, file, cb) => {
    const fileType = String(file.mimetype.split('/').pop());
    const fileName = String(Date.now());
    const totalName = fileName + '.' + fileType;
    cb(null, totalName);
    newPuzzle.image = totalName;
  },
});

const registerPuzzle = (req: any, res: any) => {
  //newPuzzle  = req.body 세팅
  //newPuzzle DB에 저장
  //res.
};

multer

[Node.js]#11 물터