자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

Node.js + Express + Vue.js로 토이 프로젝트를 만들고 있는데, Axios를 이용해 이미지 업로드 기능을 만들어보려고 한다. 시나리오 버거 메뉴 등록 폼에서 이미지를 비롯해 각종 데이터를 작성하고 해당 데이터를 multipart/form-data 컨텐츠 형식으로 서버에 전달하고 서버가 캐치해서 핸들링하는 것이 목적이다. 방법 data에 담고 관리하기 위해 데이터 속성을 선언하자. 데이터 속성을 선언했으면 이제 file 태그에서 파일을 선택하면 선택한 파일을 데이터 속성에 추가하자. methods 속성에 함수를 하나 만들고, data의 이미지 속성에 접근하여 데이터를 담아주자. file 태그에 Vue 인스턴스로 접근하기 위해 $refs 인스턴스 속성을 사용해야한다. 해당 인스턴스는 자식 ..