[Node.js] 이미지 서버 만들기(multer 라이브러리 사용)

이미지를 업로드하고, 서버에서 이를 처리하여 이미지를 저장하고 사용할 수 있게 만들어보자.

---

우선 업로드를 할 페이지 /upload를 만들어보자.

 

(upload.ejs)

<h4>업로드페이지</h4>
        <form method="POST" action="/upload" enctype="multipart/form-data">
            <!-- enctype은..서버로 폼 데이터 전송하는 방식. -->
            <!-- 일반적으로는 enctype=multipart/form-data로 설정함 -->
            <input type="file" name='image'>
            <button type="submit">전송</button>
        </form>

간단하게 form태그 안에 input태그 하나와 button태그 하나를 추가해서 만들었다.

form에서 method="POST", action="/upload"로 설정하였다.

enctype은 서버로 폼 데이터를 전송할 때 인코딩 형식 설정을 하는것인데

일반적으로는 enctype="multipart/form-data"로 설정하면 된다.

 

---

(server.js)

app.get('/upload',function(요청,응답){
    응답.render('upload.ejs');
})

우선 /upload로의 get요청을 처리해준다.

 

이제 post요청을 처리해주어야 하는데..

multer 라이브러리를 사용하면 좋다.

 

우선 터미널에

npm install multer

다음과 같이 입력해서 multer라이브러리를 설치하고

 

(server.js)

let multer = require('multer');
var storage = multer.diskStorage({
    
    destination: function(req,file,cb){
        cb(null,'./public/image')
    },
    filename: function(req,file,cb){
        cb(null,file.originalname)
    }
});

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

서버로 돌아와서 이런 코드들을 작성하자.

업로드된 파일을 하드에 저장하기 위해 diskStorage로 작성했고

업로드된 파일을 ./public/image에 저장하도록 했다.

또, 파일명은 기존 파일명을 그대로 사용했다.

 

이 외에도 특정 확장자 파일만 받도록 필터링을 하는 등의 조작이 가능하다.

app.post('/upload',upload.single('profile'),function(요청,응답){
    응답.send('업로드 완료');
})

이제 post요청을 처리하는 코드를 작성하는데,

아까 만들었던 upload라는 변수를 사용한다.

upload.single('input태그의 name명')을 두번째 인자로 적어주면 된다.

(여러 이미지 받는다면.. single이 아니라 다른 메소드를 사용해야한다)

 

---

app.get('/image/:imgName',function(요청,응답){
    응답.sendFile(__dirname+'/public/image/'+요청.params.imgName)
})

추가적으로,

받은 파일들을 해당 파일명 경로로 접속해서 볼 수 있게

get요청 처리를 해 주면 업로드한 파일들을 볼 수 있다.

 

이제 html에서 이미지를 사용할 때도 이 url을 사용하면 된다.