[Node.js / MongoDB] 이미지 업로드 & 이미지 서버 만들기

💡 실습 포인트!

• 업로드 페이지를 만들어서 해당 페이지에서 파일을 업로드할 경우 이미지인 경우에만 정상적으로 업로드가 되도록 한다.
• 업로드한 이미지는 작업하는 하드 내에 저장되고, 저장된 이미지를 특정 페이지로 불러올 수 있도록 한다.

---

💜 업로드한 이미지를 저장하는 방법 알아보기

• 어떤 사이트를 운영하든 이미지를 업로드하고 보여줘야 하는 일이 많이 발생하므로, 이미지를 어떻게 어디에 저장할지에 대한 고민은 필요하다.

     1. JavaScript 파일 근처에 폴더를 하나 만들어서 저장하는 방법 : 오늘 실습 때 사용

     2. 아마존 등 하드를 구매하여 저장하는 방법 (Amazon S3) : 저장할 이미지가 많은 경우 사용

     3. DB 에 직접 저장하는 방법

• 이 방법들 중 3번째 방법은 속도, 비용, 용량 등 다양한 측면에서 좋은 방법이라하기엔 어려우므로 주로 1번째나 2번째 방법을 사용한다.
• 하지만 이미지를 누가, 어디에, 어떤 이름으로 업로드했는지와 같은 메타 정보는 DB 에 저장하는 것이 웹개발 관습이니 기억해두자.

---

💜 이미지를 업로드할 페이지 만들기

• 업로드 페이지에는 업로드 버튼과 전송 버튼만 있으면 충분하다.

🤍 업로드 EJS 파일 만들기

  <h4 class="container mt-5"><strong>업로드 페이지</strong></h4>
  <div class="container mt-4">
      <form action="/upload" method="POST" enctype="multipart/form-data">
          <input type="file" name="image">
          <button type="submit" class="btn btn-primary">업로드</button>
      </form>
  </div>

• form 태그에 action 속성에는 /upload 경로를, enctype 에는 multipart/form-data 를 작성해주었다.
  (참고로 enctype 은 보내는 파일의 인코딩 형식으로, 파일이나 이미지 업로드의 경우 multipart/form-data 를 사용하는 게 좋다고 한다.)
• input 태그에는 type 을 file 로 작성해주었다. 이렇게 작성하면 파일 선택 버튼 및 선택된 파일명이 표시하는 부분이 생긴 걸 확인할 수 있다.
• input 태그에 name 속성을 추가하여 image 라는 값을 넣어주었다. (이 부분은 추후 사용 예정)
• button 태그의 type 도 다른 폼 양식에서와 동일하게 form 내용을 전송할 수 있도록 submit 으로 작성해주었다.

---

🤍 JavaScript 파일에서 라우팅 설정하기

app.get('/upload', function(req, res){
    res.render('upload.ejs')
})

• 누군가가 /upload 경로로 GET 요청을 하는 경우, 업로드 페이지가 나올 수 있게 설정해주었다.

---

💜 업로드한 이미지 하드에 저장할 수 있게 셋팅하기

• 사용자가 업로드한 이미지를 서버를 돌리고 있는 컴퓨터에 그대로 저장해보았다.
• 참고로 나는 작업폴더 내에 public/images 라는 폴더를 생성하여 업로드한 이미지를 저장했다.

🤍 multer 라이브러리 설치하기

• multipart/form-data 를 통해 업로드한 파일을 쉽게 저장 및 처리를 하기 위해서는 multer 라이브러리 설치가 필요하다.
• 터미널을 켠 후 npm install multer 를 입력한다.
• 설치가 끝나면 JavaScript 파일에 multer 셋팅을 다음과 같이 진행하면 된다.

let multer = require('multer'); // 설치해둔 multer 를 가져다 쓰겠다는 의미

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

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

1. .diskStorage() : 업로드한 파일을 하드에 저장하는 용도의 함수이다.

   (램에 저장하고 싶다면 memoryStorage 라고 써도 되지만, 휘발성임을 감안해야 한다.)

2. destination : 업로드한 파일을 저장할 하드의 경로를 설정하는 부분이다.

   (나는 앞서 말했듯이 public/images 폴더를 생성하여 저장할 것이라 위와 같이 코드를 작성했다.)

3. filename : 저장할 때 어떤 이름으로 파일의 이름을 저장할지 결정하는 부분이다.

   (file.originalname 이라고 작성하면 원본 그대로 저장하겠다는 의미이다.)

4. var upload : upload 라는 변수를 생성하여 multer 셋팅을 저장해주면 끝!

---

💜 필터 기능으로 원하는 확장자에 해당하는 업로드 파일만 거르는 방법 알아보기

var path = require('path');

var upload = multer({
    storage: storage,
    fileFilter: function (req, file, cb) {
        var ext = path.extname(file.originalname);
        if(ext !== '.png' && ext !== '.jpg' && ext !== '.jpeg') {
            return cb(new Error('PNG, JPG 파일만 업로드 가능합니다.'));
        }
        cb(null, true)
    },
    limits:{
        fileSize: 1024 * 1024
    }
});

• 셋팅하는 부분 안에 fileFilter 라는 항목을 추가하면 된다.
• path 라는 변수는 node.js 기본 내장 라이브러리 path 를 활용해 파일의 경로, 이름, 확장자 등을 알아낼 때 사용한다.
• limits 는 파일 사이즈의 제한을 걸고 싶을 때 사용한다.

---

💜 이미지 전송 실행해보기

app.post('/upload', upload.single('image'), function(req, res){
    res.send('파일 업로드 완료')
});

• 누군가가 업로드 페이지에서 전송 버튼을 눌러 /upload 경로로  POST 요청을 하면, 파일의 전송과 함께 '파일 업로드 완료' 라는 문구를 띄워주도록 했다.
• 즉, 누군가가 /upload 로 POST 요청을 하면 upload.single('input 의 name 속성') 이라는 미들웨어가 실행이 되고 multer 셋팅대로 업로드한 파일이 처리되는 것이다.
  (input 의 name 속성에는 본인이 설정한 name 속성값, 즉 나의 경우에는 image 를 적어주면 된다.)

  ---

🤍 이미지 전송 전

• 기존 작업 폴더의 public/images 에는 아무런 파일도 없었다.

---

🤍 이미지 전송

---

🤍 이미지 전송 후

• 기존 작업 폴더의 public/images 에 전송된 profile.jpg 가 저장된 것을 알 수 있다.

---

💜 업로드한 이미지 보여주기 (이미지 API 만들기)

🤍 JavaScript 파일 코드 작성하기

app.get('/images/:img', function(req, res){
    res.sendFile(__dirname + '/public/images/' + req.params.img)
})

• 누군가가 /images/:파라미터로 GET 요청을 하면 /public/images/ 내에서 :파라미터에 해당하는 이미지를 보내달라고 작성했다.

---

🤍 실제 경로에서 확인해보기

• 실제로 /images/profile.jpg 에 GET 요청을 해보면 아래와 같이 브라우저에 이미지가 정상적으로 나오는 것을 확인할 수 있다.

---

🤍 특정 페이지에 업로드한 이미지 불러오기

• 나는 홈으로 이미지를 불러오는 것으로 테스트해보았다.

<h4 class="container mt-5"><strong>홈</strong></h4>
<div class="container mt-4 text-center">
  <img src="/images/profile.jpg" style="width: 80%">
</div>

• 홈페이지 EJS 파일에 위와 같이 img 태그를 넣어주고 src 는 '/images/profile.jpg' 로 넣어주었다.

 

• 그러면 홈페이지에서 위와 같이 이미지가 뜨는 것을 확인할 수 있다.