console.log(FormData)는 왜 빈(empty) 객체인가?

상황

어드민 페이지에서 이벤트를 등록하는 기능을 구현하는 중이었다.

사용하는 데이터는 문자열과, 파일(이미지) 였다.

파일을 서버로 보내기 위해서 FormData 형식을 사용해야 했다.

서버로 보내기 전에 데이터가 FormData에 잘 담기고 있는지 확인하기 위해

console.log()를 찍어보니까

안 나와!!!!!!!!!!!!!!!!!!!!!!!!!!!!

그럼 프론트에서만 안 찍히고 서버에는 제대로 가고 있을까?

하고 서버에서도 req.body를 찍어보니까

또 안 나와!!!!!!!!!!!!!!!!!!!!!!!!!!!!

---

1. 프론트에서 안 찍히는 이유

FormData는 한 번에 찍어볼 수 없습니다.

why formdata.append not working? 이거 오지게 검색해 봄ㅎㅎ

타입스크립트에서는 지원이 안 되는건가 한참 고민함;;; 머쓱

근데 개발자도구 network 가서 보니까 데이터가 있더라구요??

 

let formData = new FormData();

formData.append("name", "_undefined");
formData.append("blog", "Dynamic Craft")

console.log(formData) // empty object

 

append는 작동하는데 왜 console.log가 안 찍힐까?

걍 FormData 전체를 볼 수 있는 메서드가 없다.

 

FormData의 값을 확인하고 싶다면

get 메소드를 사용해야 한다.

 

console.log(formData.get("name")) // _undefined
console.log(formData.get("blog")) // Dynamic Craft

2. 서버에서 안 찍히는 이유

그래서 왜 서버에서 못보냐? 했더니

post 요청의 body에 FormData를 보낼 때는

헤더를

'content-type': 'multipart/form-data'

이렇게 설정해서 보낸다.

 

이걸 서버에서 받을 때 그냥

req.body 콘솔에 찍으면,,, 안 찍힌다.

 

content-type이 multipart/form-data 인 경우

multer라는 모듈을 사용한다.

그 전 프로젝트에서 프로필 이미지 사진을 서버에서 처리하는 작업을 할 때

multer를 사용해서 단순히 파일 업로드용 모듈인 줄 알았는데

이렇게 사용하는 것이었다니

편견에 사로잡혀서 삽질을 오래한 케이스^,ㅜ

 

---

참고:

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.formdata.html

 

https://www.npmjs.com/package/multer