multer 모듈로 파일 업로드 하기

express환경에서 이미지 업로드를 하기 위해 찾아보니 multer 모듈을 사용해서 구현하는 것 같다.

multer 모듈을 앞으로 자주 쓰게 될 것 같아 따로 정리한다.

 

참고로 multer 문서는 한글로 잘 정리되어 있으니 참고하길

https://github.com/expressjs/multer/blob/master/doc/README-ko.md

GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

 

우선 multer 모듈을 설치한다.

npm install multer --save

Form 설정

multer은 multipart/form-data 에서만 작동하기에 form 태그에 설정해주어야 한다.

<form id="add_categori" action="url" method="post" enctype="multipart/form-data">
<div>
	<input name="categori_thumbnail" placeholder="이미지" type="file" id="edit_categori_right_contents">
</div>
<button type="submit" id="edit_categori_right_uplaod">upload</button>
</form>

multer 설정

const multer = require('multer')

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, __dirname + '../../../../src/img/list')
    },
    filename: function (req, file, cb) {
        cb(null, new Date().valueOf() + '_' + file.originalname)
    }
})
const upload = multer({storage: storage})

diskStorage를 사용하지 않으면, 사용할 수 없는 암호화된 형태로 파일이 저장이 된다.

 

destination : 이미지 저장할 위치 설정

 

filename : 저장할 파일 이름 설정

중복된 이름의 파일이 올라가는 것을 방지하기 위해 시간을 앞에 추가한다.

originalname은 업로드한 파일의 원래 이름을 말한다.

post 설정

아래 코드는 파일과 파일 정보 및 업로드자의 이름을 다같이 업로드 하는 코드다.

router.post('url ', upload.single('categori_thumbnail'), (req, res) => {
    let user = req.user;

    let filename = req.file.filename
    let categori = req.body.categori_name

    let sql = "INSERT INTO categories(categories, thumbnail) VALUES (?,?)"

    let all_sql = "SELECT * FROM categories"

    conn.query(sql, [categori, filename], function (err, rows) {
        if (err) {
            console.log(err)
        } else {
            conn.query(all_sql, function (err, rows) {

                res.render('./contents/edit_categori', {
                    'user': user,
                    'categories': rows,
                    'add_msg': 'Success Upload File !!'
                })
            });
        }
    })
});

파일 하나만 올릴 시 upload.single을 이용하여, function 전에 설정해준다.

upload.single의 categori_thumbnail은 input file 속성에서 설정해주었던 name을 말한다.

 

req.file.filename으로 위에 diskStorage에서 설정했던 이름을 불러온다.

---

깃허브 주소

https://github.com/Anhye0n/

Anhye0n - Overview