Multer를 이용한 파일 업로드

---

multer/doc 바로가기

• Multer는 파일 업로드를 위해 사용되는 multipart/form-data를 다루기 위한 node.js의 미들웨어

---

products.js

const storage = multer.diskStorage({
   destination: function (req, file, cb) {
      cb(null, 'uploads/');
   },
   filename: function (req, file, cb) {
      cb(null, `${Date.now()}_${file.originalname}`);
   },
});

const upload = multer({ storage: storage }).single('file');

router.post('/image', auth, (req, res, next) => {
   upload(req, res, (err) => {
      if (err) {
         return req.status(500).send(err);
      }
      return res.json({ fileName: res.req.file.filename });
   });
});

• multer.diskStorage({...})

  • 파일을 디스크(서버의 파일 시스템)에 저장하는 옵션을 설정

  • destination

    • 파일이 저장될 경로를 정의하는 옵션

  • filename

    • 저장되는 파일의 이름을 정의하는 옵션

• const upload = multer({ storage: storage }).single('file');

  • multer({ storage: storage })
    파일 업로드를 위한 미들웨어를 생성

  • 위에서 정의한 storage 옵션을 multer의 설정으로 전달하여, 파일을 지정된 방식으로 저장하도록 설정

---

FileUpload.jsx

const handleDrop = async (files) => {
    let formData = new FormData();

    const config = {
       header: { 'content-type': 'multipart/form-data' },
    };
    formData.append('file', files[0]);

    try {
       const response = await axiosInstance.post('/products/image', formData, config);
       onImageChange([...images, response.data.fileName]);
    } catch (error) {
       console.log(error);
    }
 };

• FileUpload.jsx 파일의 formData.append('file', files[0]);코드의 키 값인 file과 products.js 파일의 const upload = multer({ storage: storage }).single('file');코드의 single의 인자가 일치해야 한다.

---

• 업로드된 이미지 표출
  
  

• 지정한 upload 폴더에 저장된 이미지 파일