[포스코x코딩온] 웹개발자 풀스택 과정 5주차 | multer,axios

파일업로드

body-parser

• 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리
• Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와줌
• express 4.x 부터 body-parser가 내장되어 있어 설치가 필요없음
• 단점
  • 멀티파트 데이터를 처리하지 못한다.
  • 멀티파트 데이터 : 이미지, 동영상, 파일 등
  • 그래서 multer을 이용한다.~

// app.js에서 body-parser 설정
app.use(express.urlencoded({extended: true}));
app.use(express.json());

multer

파일업로드

• 클라이언트 -> 서버 데이터 전송하는 법

<input type="file" name="이름">

얘로 전송

클라이언트 준비

• form 태그의 enctype 속성으로 multipart/form-data 반드시 설정!

파일 업로드 경로 설정

• dest : 파일을 업로드하고 그 파일이 저장될 경로를 지정하는 속성

multer - 싱글파일 업로드

• req.file : 파일 업로드 성공 결과(파일 정보)
• req.body : title 데이터 정보 확인 가능

터미널에서 req.file 객체와 req.body 객체 확인 가능!!

세부설정

• 경로 뿐 아니라 파일명, 파일크기 등을 직접 지정, 제어하고 싶다면?

//multer 세부설정
const uploadDetail = multer({
    // storage : 저장할 공간에 대한 정보 
    // diskStorage : 파일을 disk에 저장하기 위한 모든 제어기능을 제공
    storage: multer.diskStorage({
        destination(req, file, done){       //done : 콜백함수
            // null -> 에러처리어떻게 할건지 보통 null 넣음
            done(null, 'uploads/')
        },
        filename(req, file, done){
            // ext에 파일 확장자명 저장
            const ext = path.extname(file.originalname);
            console.log('ext', ext);
            // 파일 확장자 뺀 파일명 + 시간추가 + 다시 파일 확장자 붙여주기 
            done(null, path.basename(file.originalname, ext) + Date.now() + ext);
        },
    }),
    limits: {fileSize: 5 * 1024 * 1024},
  // 파일사이즈를 5MB로 제한한다.
});

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

multer - 파일을 여러개 업로드하기 -1

• array() : 여러 파일을 업로드 할 때 사용, 하나의 요청안에 여러개의 파일이 존재할 때

1. multiple 필수로 넣어주기
2. request로 요청할 때 files로 요청하기!

		![]
파일 3개 선택	업로드 클릭	정보 넘어온거 확인, 아까 filename 설정한 것도 제대로 들어왓음!

multer - 파일을 여러개 업로드하기 -2

• fields() : 여러 파일을 업로드할 때 사용, 하나의 요청이 아닌 여러 개의 요청이 들어올 때

• 배열을 만들어준다.(배열 개수는 상관없음)
• key:value에서 key는 무조건 name이라고 value는 내가 설정해줌

multer 정리

• single() : 하나의 파일 업로드
  • req.file : 파일 하나
  • req.body : 나머지 정보
    
    
• array() : 여러 파일을 업로드할 때 사용, 하나의 요청 안에 여러 개의 파일이 존재할 때
  • req.files : 파일 n개
  • req.body : 나머지 정보
    
    
• fields() : 여러 파일을 업로드할 때 사용, 하나의 요청이 아닌 여러개의 요청이 들어올 때
  • req.files : 파일 n개
  • req.body : 나머지 정보

Axois 동적 파일 업로드

index.js	index.ejs

const resultBox = document.querySelector(".result");
function fileupload(){
  const file = document.getElementById('dynamic-file');
  // console.log(file.files[0]); //그냥 file이랑 files랑 다름
  const title = document.getElementById('title')

  const abc = new FormData();
  // 동적 만들 때 순서 중요하다.!
  // 폼 데이터 만들 때 파일은 제일 마지막에 전송한다.
  // 파일이 먼저 나오면 밑에 나오는 애들은 전부 무시한다.
  // index.js에 req -> file 순서로 읽어야댐
  abc.append('title', title.value);
  abc.append('dynamic-file', file.files[0]); //백엔드에서 받는 파일 값

  axios({
    //data에 아까 위에서 만든 formData를 전송한다.
    method: 'POST',
    url : '/dynamicFile',
    data: abc,
    headers: {
      'Content-type': 'multipart/form-data'   // FormData 형식에 맞춰서 보내준다.
    },
  }).then((res)=>{
    console.log('res', res)
    resultBox.innerHTML = `<div><img src=${res.data.path}></div>`
  })
}