[node.js Express] code: "LIMIT_UNEXPECTED_FILE" name: "MulterError" message: "Unexpected field"

 

문제 상황

code: "LIMIT_UNEXPECTED_FILE" name: "MulterError" message: "Unexpected field"

프론트인 리액트에서 img url을 추출해, base64 파일을 Blop으로 변환한 뒤, 다시 FormData 형식으로 백엔드의 multer에 보내주었다가 만나게 된 에러이다. 파일 크기가 컸다기에는 자그마한 이미지 파일이었기 때문에 서치를 했더니..

 

원인 파악

multer 패키지는 input 태그로 파일을 받았을 경우에는 name 을, FormData 객체로 받았을 경우에는 key 값을 통해 업로드된 파일을 식별한다. 이 값을 multer.single("key값") 의 "key값" 에 제대로 넣어주어야 하는데, 그렇지 않아서 발생한 문제이다.

 

해결 방법

 

React에서 formData.append(첫번째 인자, file) 에서 "첫번째 인자" 값과,

Express의 multer.single(인자) 의 "인자" 값이 같아야 하는데 달랐기 때문에 백엔드가 파일을 제대로 받지 못해서 일어난 문제이므로,

===React===

formData.append(srcArray.length+"번째 이미지: ", file, nameMaking)
 
 const config = {
                        header : {'content-type': 'multipart/form-data'}
                        }
                        
  axios.post('api/board/uploadImgFolder',formData, config )
  
  
  ===Express===
  const upload = multer({storage:storage}).single("file")

  router.post('/uploadImgFolder', (req,res)=>{
    upload(req,res,err=> {
        if(err){
            return res.json({success:false, inText:'업로드 과정에서의 에러', err:err})
        }
        return res.json({success:true, inText:"폴더에 업로드 성공", url:res.req.file.path, fileName:res.req.file.filename})
    })

})

 

아래와 같이 "file" 로 통일시켜준다.

===React===

formData.append("file", file, nameMaking)
 
 const config = {
                        header : {'content-type': 'multipart/form-data'}
                        }
                        
  axios.post('api/board/uploadImgFolder',formData, config )
  
  
  ===Express===
  const upload = multer({storage:storage}).single("file")

  router.post('/uploadImgFolder', (req,res)=>{
    upload(req,res,err=> {
        if(err){
            return res.json({success:false, inText:'업로드 과정에서의 에러', err:err})
        }
        return res.json({success:true, inText:"폴더에 업로드 성공", url:res.req.file.path, fileName:res.req.file.filename})
    })

})