node.js - multer로 이미지 업로드(diskStorage)

Multer는 파일 업로드를 위해 사용되는 Node.js의 미들웨어!

multipart/form-data 형식으로 단일 및 다중 파일 업로드를 지원하기 때문에 가장 많이 사용된다.

 

• https://www.npmjs.com/package/multer
• https://github.com/expressjs/multer/blob/master/doc/README-ko.md (한국어)

 

설치/셋팅 - server.js

// npm install multer 
// 이미지 업로드 라이브러리.
let multer = require('multer');

 

저장할 disk storage 설정

let ff

var storage = multer.diskStorage({
    destination : function(req, file, cb){
        cb(null, './public/images');
    },
    filename : function(req, file, cb){
        // 한글깨짐현상 방지
        ff = file
        ff.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");
        cb(null,  Date.now() +"_"+ ff.originalname);
    },
    filefilter : function(req, file, cb){
       var ext = path.extname(file.originalname);
       if(ext !== '.png' && ext !== '.jpg' && ext !== '.jpeg'){
          return callback(new Error('PNG, JPG 확장자만 업로드 가능합니다.'));
       }
       callback(null, true)
    },
    limits : {
        fileSize : 1024 * 1024
    }
});

var upload = multer({storage : storage});

옵션 설명

 

 

- destination 에 업로드 이미지 저장경로를 설정

- filename : 업로드 한 image파일 이름 설정. 보통 중복이름 방지를 위해 date를 추가해준다.

- filefilter : 파일 확장자 제한

- limits : 파일 크기 제한

 

 

🔽 input tyle file의 accept 속성으로 file open 창에서 확장자 제한가능

<input type="file" id="file" name="file" accept=".jpg, .jpeg, .png"  class="form-control mt-1" multiple>

 

문법

<input type="file" accept="파일 확장자|audio/*|video/*|image/*|미디어 타입">

속성값 설명

파일 확장자		닷(.)으로 시작되는 파일 확장자 ex) .png, .jpg, .pdf, .hwp
audio/*		모든 타입의 오디오 파일이 허용됨.
video/*		모든 타입의 비디오 파일이 허용됨.
image/*		모든 타입의 이미지 파일이 허용됨.
미디어 타입		매개변수(parameter)를 가지지 않는 유효한 미디어 타입

 

 

post할때 단일파일 or 다중파일 설정

- .single(' ') 파라미터로 input file의 name속성을 지정

- .array(' ', 10) 첫번째 파라미터는 input file의 name 속성 동일, 두번째는 파일 갯수 제한 가능!

// 단일 파일 업로드
app.post('/', upload.single('file'), (req, res, next) => {
    res.status(200).send({
        message: "Ok",
        fileInfo: req.file
    })
});

// 다중 파일 업로드
app.post('/multipart', upload.array('file', 10), (req, res, next) => {

    // console check
    req.files.map((data) => {
        console.log(data);
    });
    
    res.status(200).send({
        message: "Ok",
        fileInfo: req.files
    })
});

 

이러면 설정한 storage - destination 경로를 지정한 곳에 파일이 저장된다.

 

 

disk말고 램에 저장하는 법은 간단. 근데 잘 안씀

//램에 저장하는법
// var storage = multer.memoryStorage();
// var upload = multer({ storage : storage });