나의 개발일지 20220110 TIL(Today I learned) - 이미지 업로드

Today I learned

오늘은 이전 프로젝트를 계속해서 미구현 기능을 추가하고 코드를 조금 더 좋은 로직으로 다듬는 작업을 했다

주문을 추가하는 기능에서 원래 세탁물의 이미지를 추가하는 기능을 구현하고 싶었지만 구현을 하지 못해서

이번에 이미지를 업로드하는 작업을 진행했다 진행을 하면서 계속 file이 텍스트로 받아지는 문제가 발생했다

그래서 검색해보니까 formData로 통신을 해야지 파일을 살려서 보낼 수 있다고 했다

그래서 axios통신을 하기 전에 new FormData를 사용해서 시도를 했다

이런식으로 진행을 했는데 문제는 해결하지 못했다

오브젝트 폼데이터가 계속 문자로 받아지는 문제가 계속 진행이 되었다 이 문제를 해결하기 위해서 계속 시도를 해서

문제가 발생한 부분을 확인해서 해결은 했다

 axios({
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      method: 'post',
      url: '/api/orders',
      data: formData,
    })
      .then((response) => {
        const data = response.data;
        alert(data.message);
        window.location.href = '/order_requests_page';
      })
      .catch((response) => {
        const data = response.response.data;
        console.log(data);
        alert(data.errorMessage);
      });
  });

data를 계속 {}로 감싸서 객체형태로 보내서 문제가 발생했다 {}를 제거하고 만들어둔 formData를 사용해서 보내면 제대로

받을 수 있다

 

클라이언트 부분에서 설정은 끝나고 이제 서버쪽을 보자 express는 formData를 지원하지 않는다 그래서 사용할 수 있게

multer 패키지를 사용해야 한다

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

const imagePath = path.join(__dirname, '../', 'public', 'images');

const imageStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, imagePath);
  },
  filename: (req, file, cb) => {
    req.body.image =
      req.body.nickname +
      '-' +
      dayjs().format('YYYY-MM-DD-HH-mm') +
      '-' +
      file.originalname;
    cb(
      null,
      req.body.nickname +
        '-' +
        dayjs().format('YYYY-MM-DD-HH-mm') +
        '-' +
        file.originalname
    );
  },
});
const upload = multer({ storage: imageStorage });

module.exports = upload;

multer를 다운받고 multer를 미리 세팅해서 모듈로 가져다가 사용할 수 있게 만들었다

모듈을 만들었으니까 주문을 추가하는 미들웨어를 실행하기 전에 이 모듈을 사용될 수 있게 만든다

router.post(
  '/',
  authToken,
  upload.single('image'),
  ordersController.createOrders
);

이런식으로 미들웨어를 실행되게 만들면 설정한 파일루트와 파일이름으로 이미지를 저장하고 createOrders에서 마무리해주는 방식으로 이미지 저장 기능을 구현을 성공했다

오늘 배운점은 express에서 formData를 사용하는 방법을 배웠고 axios에 대해서 배웠다
그리고 node.js로 파일을 관리하는 방법을 배웠다