NodeJs.multer(npm 패키지, 파일 업로드하기)

목차

1. 이미지, 동영상 파일

2. 파일 업로드

3. multer 불러오기

4. multer 사용하기

---

1. 이미지, 동영상 파일

 

 

이미지나 동영상 파일은 컴퓨터에게 어떻게 인식이 될까?

 

이미지, 동영상 같은 미디어 파일들은 우리에게나 이미지, 동영상이지 컴퓨터 입장에서는 그저 데이터일뿐이다.

그저 데이터란 것은 이미지가 아닌 텍스트로 저장한다는 의미이다.

 

<그림 1> png파일의 확장자를 txt로 바꾼 모습

 

다만, 컴퓨터에게 확장자를 주어 우리가 볼 수 있는 형태로 변환해 이미지로 보여줄 뿐이다.

 

<그림 2> 확장자를 다시 png로 바꾸니 이미지 형태가 되었다.

 

여기서 기억해야할 점은 이미지나 동영상 파일도 컴퓨터에겐 그저 텍스트일 뿐이라는 점이다.

 

 

 

---

2. 파일 업로드

 

 

인터넷을 사용하다보면 글이나 프로필을 지정할 때 나의 캐릭터 사진등을 올려서 사용할 수가 있다.

 

 

<그림 3> 내 프로필

 

이런 파일(이미지 등)들은 내가 사용하는 홈페이지의 서버에 해당 데이터를 저장하고,

내가 로그인하면 요청한 사진을 나에게 전달해 보여주는 방식으로 이루어질 것이다.

 

<그림 4> 이미지의 저장

<그림 5> 프로필 불러오기

 

이미지 파일은 텍스트 형태이기 떄문에 요청 메시지에 보낼때, 요청 메시지 바디부분에 넣어 보낼 수 있다.

하지만, 이미지 파일은 일반 텍스트에 비하면 굉장히 큰 용량을 차지하기 떄문에 조금은 다른 형식으로 보내야한다.

 

그 동안은 application/json이나 application/x-www-form-urlencoded 로 보냈으나, 이 두 방식으로는 해당 데이터를 보낼 수 없어 multipart/form-data 형식으로 보내야한다.

 

※ multipart/form-data

- 요청 메시지 body영역에 파일과 같은 큰 데이터를 넣어야할 떄 사용한다.
- 대용량 데이터를 처리하기에 적합하다.

 

"Content-type"에 따라 요청 body 내용을 parser해서 받아야하는데, multipart/form-data 또한 parser해서 받아야한다.

이를 도와주는 패키지 중 multer를 사용해보도록 하자.

 

 

 

---

3. multer 불러오기

 

 

Content-type이 multipart/form-data인 요청 메시지를 받으면 요청 body를 parser해주는 npm 패키지이다.

 

사용을 위해서 패키지를 다운 받아주도록 하자.

 

npm init -y
npm install multer

 

multer를 require해서 console.log를 찍어보면, 다음과 같이 나온다.

 

<그림 6> multer의 구성

multer의 데이터 형태는 함수이고, 안에는 위의 세 메서드가 들어있다는 것을 알 수 있다.

 

 

 

multer를 실행해서 다시 console.log를 찍어보도록 하자.

 

const multer = require('multer')
const upload = multer()

console.log(upload)

/*
Multer {
  storage: MemoryStorage {},
  limits: undefined,
  preservePath: undefined,
  fileFilter: [Function: allowAll]
}
*/

 

<그림 7> multer를 실행해서 담아보았다.

 

multer를 사용하기 위해서 살펴볼 것은 storage와 limits이다.

 

 

storage

 

storage는 어디에(destination), 어떤 파일이름(filename)으로 저장할지 결정한다.

 

storage안에는 destination과 filename이라는 것을 넣어주어야한다.

destination과 filename의 형태는 다음과 같다.

 

(req, file, done) => { ... }

 

- req는 요청정보가 들어있다.
- file은 업로드한 파일의 정보가 들어있다.
- done은 함수이고, 첫번째 인자에는 에러가 있다면 넣어주고 아니면 null을 준다. 두 번쨰 인자에는 파일 경로나, 이름을 넣어주고, done을 이용해 저장이나 실행을 한다.

 

 

limits

 

limits는 간단하게 파일의 사이즈를 제한한다.

 

 

 

---

4. multer 사용하기

 

 

multer를 이용해서 미들웨어로 사용해보는데,  express.json과 express.urlencoded처럼 모든 요청에 대해 장착하기엔 너무 무거운 녀석이다. 따라서 파일 업로드가 들어오는 라우터에만 장착하도록 해야한다.

 

그럼 이제, 위에서 본 내용을 토대로 multer를 세팅해보자.

 

const multer = require('multer')
const path = require('path')

const upload = multer({
    storage: multer.diskStorage({
        destination: (req, file, done) => {
            done(null, "uploads/")
        },
        
        filename: (req, file, done) => {
            const ext = path.extname(file.originalname) // 리턴값은 확장자(.jpg)
            const basename = path.basename(file.originalname, ext) // 1.jpg값 넣고, .jpg를 없앰
            const filename = `${basename}_${Date.now()}${ext}`
            done(null, filename)
        }
    }),
    
    // file 사이즈에 대한 내용이 들어간다.
    limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
})

module.exports = upload

 

multer를 이용해서 요청메시지에 multipart/form-data가 들어왔을경우에 body를 parser해주는 미들웨어를 만들었다.

 

이를 controller에 장착해서 사용하도록 하는데, 경우에 따라 다르게 사용해야한다.

 

1. multer.single("인수"), 업로드 파일이 하나일 경우
2. multer.array("인수"), 업로드 파일이 여러개일 경우
3. multer.fields("인수"), 업로드 파일 요청이 여러개일 경우
4. multer.none("인수"), 업로드는 하지않고 요청을 하는 경우

불러와서 한번 실행시켜야하는데, 실행시 인수는 <input>의 name이나 폼데이터의 키를 넣어주면 된다.

 

const express = require('express')
const upload = require('./middlewares/upload')
const app = express()

app.post('/single', upload.single('upload'), (req, res, next) => {
    res.send('upload')
})

app.post('/array', upload.array('upload'), (req, res, next) => {
    res.send('array')
})

app.post('/uploads', upload.fields([{ name: 'upload1' }, { name: 'upload2' }, { name: 'upload3' }, { name: 'upload4' }]), (req, res, next) => {
    res.send('uploads')
})

app.listen(3000, () => {
    console.log('back start')
})