[포스코x코딩온] 파일업로드(multer, Axios 동적 파일 업로드)

body-parser

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

파일 업로드(multer)

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

<input type = "file" name="userfile">

multer 미들웨어

• 파일 업로드를 위해 사용되는 미들웨어
• express로 서버를 구축할 때 가장 많이 사용되는 미들웨어
• 설치하기

npm install multer

• multer 불러오기

const multer = require("multer");

• 클라이언트 준비
  • form 태그의 enctype 속성으로 'multipart/form-data' 반드시 설정
  • post 방식으로 해야 한다.

<!--method="post" enctype="multipart/form-data" 이 부분은 필수-->
<form action="/upload" method="post" enctype="multipart/form-data">

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

//multer Setting
const upload = multer({
  //dest: 업로드한 파일을 저장할 경로 지정
  dest: "uploads/", //폴더가 자동으로 생성된다.
});

하나의 파일 업로드

• single()

app.post("/upload", uploadDetail.single("userfile"), (req, res) => {
  console.log(req.file);
  console.log(req.body);
});

• req.file객체와 req.body 객체로 파일 정보 확인 가능

파일 정보를 확인할 수 있다.

---

세부 정보 설정

• 경로뿐 아니라 파일명, 파일 크기 등을 직접 지정, 제어 할 수 있다.
• multer setting을 통해 파일 정보를 수정하여 업로드할 수 있고, req.file을 통해 정보를 확인할 수 있다.
• 보통 파일 이름의 중복을 방지하기 위하여 => 보통, originalname에 접근하여 파일명 뒤에 timestamp로 파일명 중복을 방지한다.

const uploadDetail = multer({
  //storage: 저장할 공간에 대한 정보
  //diskstorage: 파일을 디스크에 저장하기 위한 모든 제어 기능 제공
  storage: multer.diskStorage({
    //destination : 파일 저장 경로 지정
    destination(req, file, done) {
      done(null, "uploads/"); 
		//폴더가 자동생성이 안되서 미리 폴더를 만들어 두어야 한다.
    },
    //filename: 파일 이름 설정
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
		  //파일 경로에 확장자가를 가져옴
      done(null, path.basename(file.originalname, ext) + Date.now() + ext); 
			//ext(확장자), basename(원래 이름 originalname, 에서 ext를 떼라)
    },
  }),
  limits: { fileSize: 1024 * 1024 * 5 }, //5메가로 용량 지정
});

---

파일 여러 개 업로드(ver1)

• array() : 여러 파일을 업로드할 때 사용, 하나의 요청 안에 여러 파일이 존재할 때 사용
• files로 해야 한다.
• multipe 조건을 꼭 넣어야 한다.

<form action="/upload/array" method="post" enctype="multipart/form-data">
      <input type="file" name="userfiles" multiple /><br />
      <input type="text" name="title" /><br />
      <button type="submit">파일 여러개 업로드</button>
    </form>

app.post("/upload/array", uploadDetail.array("userfiles"), (req, res) => {
  console.log(req.files);
  console.log(req.body);
});

하나의 input 태그에 여러 개의 파일을 넣을 수 있다.

추가한 파일의 정보와 파일이 uploads 폴더에 들어간 것을 확인할 수 있다.

파일 여러 개 업로드(ver2)

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

<form action="/upload/fields" method="post" enctype="multipart/form-data">
      <input type="file" name="userfile1" /><br />
      <input type="text" name="title1" /><br />
      <input type="file" name="userfile2" /><br />
      <input type="text" name="title2" /><br />
      <button type="submit">파일들 업로드</button>
    </form>

app.post(
  "/upload/fields",
  uploadDetail.fields([{ name: "userfile1" }, { name: "userfile2" }]),
  (req, res) => {
    console.log(req.files);
    console.log(req.body);
  }
);

여러개의 input 태그를 사용하여 파일을 업로드 할 수 있다.

---

※정리

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

---

Axios 동적 파일 업로드

• 파일을 저장하고 불러와서 화면에 띄울 수 있다.

<h1>동적 파일 업로드</h1>
    <!--동적일 때는 form 태그가 필요 없다.-->
    <input type="file" name="dynamic-userfile" id="dynamic-userfile" /><br />
    <button type="button" onclick="fileUpload()">업로드</button>
    <br />
    <div class="result"></div>
    <script>
      let resultBox = document.querySelector(".result");

      function fileUpload() {
        const file = document.getElementById("dynamic-userfile");
        console.log(file.files[0]);
        const formData = new FormData();
        formData.append("dynamic-userfile", file.files[0]); //폼 데이터 넣기

        axios({
          method: "POST",
          url: "/dynamicFile",
          data: formData,
          headers: {
            "content-type": "multipart/form-data", //enctype="multipart/form-data"
          },
        }).then((res) => {
          console.log("res", res);
          resultBox.innerHTML = `<div><img src=${res.data.path}></div>`;
        });
      }
    </script>

---

연습문제는 다음글에 동적 form 전송이랑 함께 게시하겠습니다.

https://dongho-kang.tistory.com/39

[포스코x코딩온] 동적form전송, 파일 업로드 실습

---

https://github.com/DongHo-Kang/KDT-8-web/tree/cb306e36b92eccb5efc93c4504552c0872ce9e66/230802_file_upload