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

syxxne·2023년 8월 22일
0

부트캠프

목록 보기
13/42

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) {
    ...
  });
}

0개의 댓글