Javascript에서 Formdata를 ajax로 넘기는 방법

단순히 text value만 넘긴다고 하면 form data를 굳이 ajax로 넘겨야 할 필요는 없다.

그러나 파일을 ajax로 넘겨야할 때는 form data 전체를 넘기는 것 외엔 다른 방법이 없다.

이 때는 formData 객체를 활용하면 된다.

일단 코드를 보자!

위와 같이 formData 객체를 생성하고

거기에 formData로 넘길 것들을 append로 더해주면 된다

이제 formData를 ajax로 넘겨만 주면 끝인데 함정이 있다.

attachedImage를 append 하고 formData를 console.log로 찍어보면

formData 객체가 찍히긴 하는데 keys와 values 어디에도 추가해 준 데이터를 확인할 수 없다.

아무리 이런 저런 포스팅이 있어도 개발자라면 이런 상황에서 믿기 어려울수 있다.

단순히 console.log(formData)로 찍으면 내용을 확인할 수 없는게 브라우져 정책이라고 한다.

그래서

이렇게 적어줘야 한다. 이러면

formData에 잘 append 되었음을 확인할 수 있다.

확인도 했으니 이제 ajax로 넘겨주기만 하면 된다.

넘기는 건 보통의 ajax 보낼때와 같다.

이렇게 send 메소드에 파라미터로 formData만 넘겨주면 formData를 백엔드로 잘 넘겨줄 수 있다