[multer] 이미지 express 서버에서 처리하기

DB에 이미지를 직접 저장하지 않는다.

DB는 비싸고, 용량이 큰 이미지를 저장하기 적합하지 않다.

 

이미지를 저장하는 공간을 확보하고 그 경로를 DB에 저장한다.

지금은 서버에 그냥 폴더를 만들어서 저장

(S3버켓을 사용해서 저장하는 방법으로 바꿀 예정)

 

클라이언트에서 이미지를 보내주면

서버에서 처리하는 건 의외로 간단하다.

multer모듈을 사용해서 저장하면 된다.

 

---

multer 모듈을 사용해서

npm install multer

서버 안의 폴더에 이미지 파일을 저장한다.

 

const multer = require('multer');
const upload = multer({ dest: './upload' });

upload 폴더에 이미지를 저장

 

app.use('/image', express.static('./upload'));

루트 /image 로 들어오는 요청은 upload폴더의 파일을 제공

 

app.post('/user/profile', upload.single('image'), (req, res) => {
  
  let image = '/image/' + req.file.filename;
  // 이미지 경로
  
  let token = req.cookies.userId;
  jwt.verify(token, 'secretkey', (err, decoded) => {
    users
      .update(
        {
          profileImg: image, // DB에 경로만 저장
        },
        {
          where: {
            id: decoded.id,
          },
        },
      )
      .then(() => {
      	res.send('profileImg updated')
      });
  });
});

 

이미지를 클라이언트에 렌더링할 때는

<img src="http://localhost:4000/images/파일이름">

프로필 사진을 저장하는 거라 본인 경로를 서버로 부터 받아서 넣어주면 된다.

경로는 "/images/파일이름"

 

---

근데 프로필 수정할 때 이전 사진 삭제를 안하고 있어서 이 부분도 추가해야 할 것 같다.