Node.js multer 미들웨어로 이미지 업로드하기

🔍 multer 미들웨어란?

multer 는 이미지 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할때 사용하는 미들웨어이다.

multer 미들웨어를 사용하려면 HTML 파일에서 form 태그의 enctype 을 multipart/form-data 로 지정해주어야 한다!

npm install multer

const multer = require('multer');


const upload = 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);
        },
    }),
    limits : {fileSize : 5 * 1024 * 1024},
})

multer 함수 안에 인수로 설정이 들어간다. 설정에는 storage 와 limits 가 있다.

storage 속성 안에는 어디에 (destination) 어떤 이름으로 (filename) 저장할지를 넣는다.

destination 과 filename 매개변수 안에는 req(요청), file(업로드한 파일에 대한 정보), done(콜백함수)를 넣는다.

done안의 첫번째 인수에는 에러가 있다면 에러를, 두번째 인수에는 실제 경로나, 파일이름을 넣는다.

req와 file의 데이터를 가공해서 done 함수로 넘기는 형태이다.

- path.extname(file.originalname) 이란

파일확장자 추출후 출력

경로의 마지막 부분의 문자열에서 마지막 '.'에서부터 경로의 확장자를 반환한다.

경로의 마지막 부분에 '.'가 없거나 첫 글자가 '.'이라면 빈 문자열을 반환한다.

위의 사진으로 예로 들면 png 확장자만 출력이 된다. 위의 문구는 파일명이 한글이기때문에 저런식으로 나온것이다.

- path.basename(filePath, path.extname(filePath))) 이란

-파일명 추출시 확장자 제외후 출력

🔍 post 요청 하기

app.post('/upload', upload.single('image'), (req, res) => {
    console.log("req.file : ", req.file);
    console.log("req.body : ", req.body);
    console.log('업로드 완료');
    res.send('이미지 업로드 완료');
})

잘 출력이 된걸 확인할 수 있다.