[Axios] Multipart/form-data 핸들링

Node.js + Express + Vue.js로 토이 프로젝트를 만들고 있는데,  Axios를 이용해 이미지 업로드 기능을 만들어보려고 한다.

 

 

시나리오

---

버거 메뉴 등록 폼에서 이미지를 비롯해 각종 데이터를 작성하고 해당 데이터를 multipart/form-data 컨텐츠 형식으로 서버에 전달하고 서버가 캐치해서 핸들링하는 것이 목적이다.

등록 폼에서 file태그를 사용해 이미지를 선택하고 작성한 데이터와 함께 서버로 전달하는 것이 목표다.

 

 

방법

---

data에 담고 관리하기 위해 데이터 속성을 선언하자.

 

데이터 속성을 선언했으면 이제 file 태그에서 파일을 선택하면 선택한 파일을 데이터 속성에 추가하자.

methods 속성에 함수를 하나 만들고, data의 이미지 속성에 접근하여 데이터를 담아주자.

 

file 태그에 Vue 인스턴스로 접근하기 위해 $refs 인스턴스 속성을 사용해야한다.

해당 인스턴스는 자식 컴포넌트에 대해 직접 접근하여 핸들링이 가능한 인스턴스 속성이다.

 

$refs 속성을 로그로 찍어보면 해당 컴포넌트를 타겟으로 잡는 것을 확인할 수 있다.

 

이제 file 태그에서 파일을 선택할 때 마다 fileSelect()함수가 작동하도록 설정해주자.

 

v-on:change 디렉티브를 설정하여 fileSelect()함수를 바인딩해주자. 

여기서 가장 중요한게 Vue 인스턴스의 $refs 속성을 사용하기 위해서는 반드시 태그에 ref 속성을 정의해줘야 한다.

 

 

이제 등록 버튼을 클릭하면 multipart/form-data를 보내도록 해보자.

알고 계셨나요? FormData를 로깅할 때에는 entires()를 사용해야합니다.

FormData객체를 생성해주고 append() 함수를 이용하여 데이터들을 등록해주자.

그리고 axios로 post HTTP 통신을 보낼 때 (url, FormData, options) 순으로 작성해주자.

options에서 headers 속성으로 Content-Type을 정의해주면 완성이다.

 

이제 폼을 작성하고 등록버튼을 클릭하면 콘솔에 아래와 같이 FormData 로그가 출력된다.

 

 

 

서버에서 해당 데이터를 받아 핸들링처리하여 작업하면 된다.

Express의 multer 미들웨어를 NPM을 이용해 설치하고 다음과 같이 설정한다. 

파일의 업로드 저장 위치를 설정하고, 파일 명을 커스텀한다.

 

그리고 라우터에서 multer를 사용할 수 있게 upload를 인자로 넘긴다.

Express 모듈과 Multer를 같이 인자로 전달한다.

 

라우트에서 upload를 인자로 추가해주고 사용하면 된다.

반드시 컨트롤러를 호출하기 전에 multer로 파일을 처리해야한다.

컨트롤러를 호출하기 전에 먼저 multer를 이용해 파일을 처리하자.

multer를 이용해 파일을 처리하면 파일이 아닌 데이터들은 자동으로 req.body에 처리해준다.

 

이후 컨트롤러를 작성하자.

컨트롤러에서 MongoDB의 도큐먼트 스키마에 맞게 객체 디자인을 맞추고 객체를 생성하면 된다.

 

로그를 찍어보면 다음과 같이 모든 데이터가 정상적으로 들어온 것을 확인할 수 있다.

 

 

 

참고 : 

https://serversideup.net/uploading-files-vuejs-axios/

Uploading Files With VueJS and Axios - Server Side Up

https://www.zerocho.com/category/NodeJS/post/5950a6c4f7934c001894ea83

(NodeJS) multer를 사용해 이미지 업로드하기 - 폼데이터 처리