[ErrorFix] Axios multer로 파일 전송시 req.files에 나오지 않는 오류 해결

 

 

Axios로 파일을 보낼때 파일이 req.files에 나오지 않는 현상이 나왔다.

 

원래라면 이렇게 req.files를 할 때 나와야하는데 아예 빈 값이 나와 당황스러웠다.

 

const formData = new FormData();
formData.append("script", data);
axios.post(`http://${process.env.LOGICKIT_URL}/module/add`, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .catch((error) => {
            console.log(`fail 😱`, error.message)
        })

작성한 코드를 한번 살펴보면 이상한 점이 하나도 보이지 않는다.

원인을 찾기 위해 여러가지로 코드를 수정해본 결과..!

 

formData.append("script", data, { filename: 'at.ts'});

바로 filename을 써주지 않았기 때문이다.

JS 공식문서를 보면 FormData.append()에 매개변수 중 filename이라는 옵션이 있다.

 

출처: https://developer.mozilla.org/ko/docs/Web/API/FormData/append

흠.. 읽어보니 파일 이름이라는 것을 알 수 있지만 아직까지도 무슨 역할을 해주는지 모르겠다.

하지만 이걸 req.files로 받았을 때 보면 정확하게 알 수 있다.

 

바로 filename이 multer의 originalname이라는 것을 알 수 있다 ❗️

즉, originalname을 설정해주지 않아 파일이 req.files에서 찾아볼 수 없었던 것이다.

그러니 앞으론 filename을 이용해서 파일 이름을 만들어주도록 하자.