[Node] multer를 이용하여 서버에 단일 이미지 저장하기

프론트: React

백엔드: Node (Express)

 

클라이언트의 이미지를 서버에 저장하는 것을 구현하였습니다.

파일은 multipart/form-data 형식으로 서버단에 전송되어야 합니다.

 

React

 // <input type="file" onChange={handleChangeImageFile} ... />
 
 const handleChangeImageFile = async (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;

    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    
    const res = await axios.post(
      'https://domain.com/api/v1/upload/image',
      formData,
      {
        headers: { 'Content-Type': 'multipart/form-data' },
      }
    );
  };

 

 

 

Node (Express)

// 미들웨어 함수인 express.static을 이용하여 정적 파일을 제공
// static/images라는 가상 경로를 지정

app.use('/static/images', express.static('public/images'));

// diskStorage는 disk에 file을 저장하게 함

// destination 함수는 파일이 어디에 저장될 것인지 지정
// filename 함수는 폴더안에 파일 명이 어떻게 저장될 것인지 지정

// destination이 없으면 운영체제의 임시 파일을 저장하는 기본 폴더로 지정이 됨
// filename 함수는 시스템 시간으로 파일명을 저장
// path.extname(file.originalanme)은 파일의 확장자를 가져옴

const imageStorage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, 'public/images'); // 전송된 파일이 저장되는 디렉토리
  },
  filename(req, file, cb) {
    cb(null, new Date().valueOf() + path.extname(file.originalname)); // 시스템 시간으로 파일이름을 변경해서 저장
  },
});

// multer()는 Multer 객체를 반환, 옵션값을 줄 수 있음

const imageUpload = multer({ storage: imageStorage });

// imageUpload.single('file') 메소드를 이용하여, 1개의 파일을 받고 이 파일을 req.file에 저장
// 미들웨어의 역할을 한다.

app.post(
  '/api/v1/upload/image',
  imageUpload.single('file'),
  async (req, res) => {
    const fileInfo = {
      originalname: req.file.originalname,
      mimetype: req.file.mimetype,
      filename: req.file.filename,
      path: req.file.path,
    };

    res.send(fileInfo);
  }
);

클라이언트 단의 formData.append('file', ...) 와 서버단의  imageUpload.single('file')의

매개변수 명이 같아야 제대로 받아올 수 있습니다.

 

현재는 서버에 이미지 파일을 저장하고 있지만 실제로는 S3에 저장을 하고

CloudFront와 함께 클라이언트에 서빙하는 것으로 개선하려고 합니다.

 

DB의 이미지 컬럼에는 fileInfo의 finename을 저장하고 클라이언트 단에서 data를 fetching하고 

<img src={`https://domain.com/static/images/${data.filename}`} alt="" />

이런식으로 서버의 이미지를 참조할 수 있습니다.