관리 메뉴

SIMPLE & UNIQUE

139번 fileupload.js 설명 본문

초보자를 위한 react 200제

139번 fileupload.js 설명

착한코딩 2021. 9. 14. 22:40

[1]
multer는 파일업로드를 지원하는 npm패키지인데요
multer의 기능 중 DiskStorage를 사용하면 서버가 실행되는
컴퓨터의 디스크에 파일을 저장할 수 있습니다.
이 컴퓨터가 AWS서버면 AWS서버의 지정된 폴더에 파일이 업로드 됩니다.

[2]
https://www.npmjs.com/package/multer
npm 공식 문서에서 DiskStorage로 검색하시면 아래와 같이 사용예제가 나오는데요

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, file.fieldname + '-' + uniqueSuffix)
  }
})


[3]
multer > DiskStorage에서 파일업로드에 사용하는 옵션이 크게 두 가지가 있습니다.
destination와 filename인데요.
destination는 파일이 저장될 경로를, filename는 저장될 파일의 이름을 지정하는 옵션입니다.
같은 원본파일도 업로드 시간이 다르면 다른 별개의 파일로 업로드 되어야 합니다.
이때 시간 정보를 파일명에 넣기위해 moment라는 패키지를 사용했습니다.
예를 들어) a.png라는 이미지를 12시에 한번, 13시에 한번 업로드하면
a20210914120000.png, a20210914130000.png이렇게 2파일이 업로드 되는거에요.

[4]
예제소스 fileupload.js

const multer = require('multer');//파일 업로드를 위해 multer 패키지를 불러옵니다.
const moment = require('moment');//파일명에 현재 시간을 할당하기위해, 시간 정보를 불러오는 moment 패키지를 불러옵니다.

const storage = multer.diskStorage({//multer패키지의 diskStorage함수를 실행합니다.
  destination: function(req, file, cb) {//파일 저장 경로를 지정하기위해 destination 함수를 싱행합니다.
                                               //이때 파라미터로 react서버에서 전달받은 request와 file정보를 받습니다. 
                                               //request에는 텍스트 변수들이, file에는 업로드한 정보가 들어있습니다.
                                               //cb함수는 multer내부적으로 사용되는 함수이니, 정해진 규칙처럼 사용하시면 됩니다.
      try {
        var type = req.query.type; //react에서 전달받은 type파라미터를, 내부변수 type에 할당합니다.
        cb(null, type);//type에는 폴더 상대경로를 넣어왔는데요. cb함수의 두번째 파라미터로 경로값을 넣습니다.
      } catch (error) {
        console.log(error) 
      }
    },
    filename: function(req, file, cb) {//저장될 파일명을 지정하기위해 filename함수를 실행합니다.
                                             //이때 파라미터로 react서버에서 전달받은 request와 file정보를 받습니다. 
      cb(null, moment().format('YYYYMMDDHHmmss') + "_" + file.originalname);
                                            //moment함수로 현재시간을 연부터 초까지 추출해, 원본파일명 앞에 붙여줍니다.
    }
});

const upload = multer({ storage: storage }).single("file");
//line4에서 diskStorage함수의 결과로 저장된 storage변수를, multer의 내부 storage변수에 저장합니다. 
//파일이 하나이니 single('file')함수도 붙여줍니다.
module.exports = upload;
Comments