[SuiteCare] MultipartFile과 JSON 같이 보내기

이력서를 등록하는 기능을 구현하는 중에 사진과 폼 데이터들을 같이 보내려는데

여러 차례의 삽질이 있었다.

 

클라이언트쪽 코드를 먼저 살펴보겠다.

 

내가 서버쪽으로 전송하려고 했던 body의 구조이다.

const body = {
    	mateResume: {
            profile_picture_filename: '',
            contact_time_start: '09:00',
            contact_time_end: '21:00',
            introduction: '',
            desired_wage: ''
        },
        careerList: [],
        certificateList: [],
        locationList: [],
        mainServiceList: []
    }

 

const response = await axiosInstance.post('/api/v1/mate/resume', body);

 

위 코드처럼 간단하게 axios 코드를 작성하고 실행했더니

 

'Current request is not a multipart request' 에러 발생가 발생했다.

File을 보내면서 multipart/form-data 타입 설정을 안해줬다...  이런 기본적인 실수를 하다🥲

 

const response = await axiosInstance[method]('/api/v1/mate/resume', body, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }});

 

호다닥 헤더에 multipart/form-data 타입을 명시하고 전송을 해보니 서버측에서 데이터를 받니 못하는 것이다...

 

폭풍 검색을 거쳐보니 헤더만 변경하는 것이 아니라 보내는 데이터를 formData로 변환해줘야한다고 한다.그래서 보내려던 body를 FormData 객체를 생성하여 그 안에 담아주었다.

 

let formData = new FormData();

formData.append('file', document.querySelector('input[type=file]').files[0]);
formData.append('resumeData', body);


const response = await axiosInstance[method]('/api/v1/mate/resume', body, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }});

 

이렇게 코드를 작성하고 실행해보니 아래 에러가 발생했다.

 

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'application/octet-stream' is not supported]

 

resumeData을 보낼 때 Content-type을 ' application/json' 타입으로 보내지 않아 발생한 에러이다.

 

그런데 그냥 appllication/json 타입을 기입하고 끝나는 것이 아니라문자열화를 해주고 Blob처리를 해줘야한다고 한다.

 

Blob은 대형 이진 객체(Binary Large Object)를 의미하며 일련의 데이터를 처리하거나 간접 참조하는 객체이다.

 

let formData = new FormData();
formData.append('file', document.querySelector('input[type=file]').files[0]);
formData.append('resumeData',
  	new Blob([JSON.stringify(body)], 	// body는 파일을 제외한 폼 데이터
    	{type: "application/json"})); 

const response = await axiosInstance[method]('/api/v1/mate/resume', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }});

 

body를 직렬화하고 Blob 처리해주니 서버측으로 잘 전달되었다! 😆

 

 

---

[출처]

• https://velog.io/@kcj_dev96/multipartform-dataContent-type
• https://velog.io/@minh0518/Blob%EA%B0%9D%EC%B2%B4%EB%9E%80