Axios 로 파일과 JSON 파일 동시에 넘기기

보통 파일 업로드를 구현할때 Event 로 파일을 받은 후 formData에 담아서 multipart 로 보낸다. 

const files = e.target.files;
const formData = new FormData();

for (let file of files) formData.append('file', file);
// 혹은
formData.append('file', file[0]);

 

간혹 파일 이외에 추가 정보를 보낼때가 있는데, 그때에도 formData를 담아서 보내면 된다. 

...
const fileInfo = "user_type";
formData.append('type', fileInfo);

그런데 만약 Object 타입을 보내야할 때는 어떨까? 

기나긴 삽질+도움 끝에 찾은 방법은 다음과같다. 

Object 타입은 보낼수 없으므로 우선 stringify를 사용하여 json 형태로 만들어야한다.

그리고 뒤에 옵션을 붙여 application/json 타입으로 해당 데이터는 보내겠다고 추가를 해줘야 하는데, 

추가를 하려면 해당 데이터를 blob 타입으로 만들어야한다. 

blob(Binary Large Object)로 원래는 바이너리 형태로 객체를 저장하는 내장함수로, 주로 파일을 읽을때 쓰는데, 여기서는 multipart로 json 데이터를 보내기 위해 썼다. 

...
let dataInfo = {
    fileType: "user_type",
    categoryType: "faq_file"
}
formData.append('request', new Blob([JSON.stringify(dataInfo)], {type: 'application/json'}) );

그리고 axios에서는 그냥 Content-Type을 multipart로 보내면 된다.