풀스택 웹개발 부트캠프 5주차 (3)

multer

• body-parser는 멀티파트 데이터를 처리하지 못함 → multer 사용
• 멀티파트 데이터 : 이미지, 동영상, 파일 등
• 파일 업로드를 위해 사용되는 미들웨어
• 파일 업로드는 POST 방식 이용

파일 업로드 순서

• 프론트
  • input 태그 type="file"로 설정
  • input의 name 속성 = 서버에서 파일을 인식할 이름
  • 일반 form 전송이면 form 태그 or 동적 파일 업로드 선택
  • form 태그 enctype="multipart/form-data" 설정
• 백
  • multer 세부 설정 (경로, 파일 이름 등)
  • req.file 객체 : 업로드된 파일
  • req.body : 파일 외의 데이터 값들
  • 업로드한 파일을 서버에서 띄울 때에는 app.js에 정적 파일 경로를 꼭 지정해주어야 함

하나의 파일 업로드

• single( ) : 하나의 파일 업로드할 때 사용
• req.file : 파일 하나

const multer = require("multer");
const upload = multer({
  dest: "uploads/",
});

app.post("/upload", upload.single("input name 값"), function (req, res) {
  ...
});

• dest: 파일을 업로드하고 그 파일이 저장될 경로를 지정
• 콜백 함수 (function (req, res)) 는 맨 마지막에 명시해야 하므로 upload.single을 먼저 적음
• single( )을 실행하면, uploads/ 폴더가 새롭게 생성됨

multer 세부 설정

const uploadDetail = 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);
    },
  }),
  limites: {fileSize: 5 * 1024 * 1024},
});

app.post("/upload", uploadDetail.single("input name 값"), function (req, res) {
  ...
});

• storage : 저장할 공간에 대한 정보
  • diskStorage : 파일을 디스크에 저장하기 위한 모든 제어 기능을 제공
  • destination : 저장할 경로
  • filename : 파일명
• limits : 파일 제한
  • fileSize : 파일 사이즈 제한

파일 여러 개 업로드

• array( ) : 하나의 요청 안에 여러 개의 파일이 존재할 때 사용
• req.files : 파일 n개

app.post("/upload/array", uploadDetial.array("input name 값"), function (req, res) {
  ...
});

• fields( ) : 하나의 요청이 아닌 여러 개의 요청이 들어올 때 사용
• req.files : 파일 n개

app.post(
  "/upload/fields", 
  uploadDetial.fields([{ name : "input name 값"}, { name : "input name 값" }]),
  function (req, res) {
    ...
  }
);

Axios 동적 파일 업로드

• 비동기적으로 파일 업로드 가능
• 파일을 업로드하여도 페이지가 새로고침되지 않음

function fileUpload() {
  const formData = new FormData();
  const file = document.getElementById("input id 값");
  formData.append("input name 값", file.files[0]);
  
  axios({
    method: "POST",
    url: "/dynamicFile",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  }).then(function (res) {
    ...
  });
}