vue(5) 이미지 업로드 (formData에 담아 axios로 보내기)

 

vue.js 로 이미지업로드 기능을 구현 중이다. 고객들이 올리는 이미지를 formData에 담아 axios 통신으로 백엔드에 보내주려고 한다. 하지만 나는 vue린이 ... 하지만 안될 건 없다. 하다보니 어떻게든 되더라 (시간이 걸려서 그렇지)

 

컴포넌트 로직

ImageUpload.vue 에서 상담요청 버튼 누름

↓

UploadConfirm.vue 로 넘어가 작성내용 리뷰 후,  확인버튼 누르면 

↓

index.js 의 통신 로직을 타고 백엔드로 데이터 전송

 

---

vue(5) 이미지 업로드 (formData에 담아 axios로 보내기)

 

ImageUpload.vue - 결과 화면

상담 작성란을 모두 작성 후, 마지막으로 다중 파일 선택을 한 뒤 "상담요청" 버튼을 누르면 작성한 데이터와 함께 확인페이지로 넘어간다.

기존에 구현된 상담기능에 이미지 업로드 기능을 추가한 것이다.

 

ImageUpload.vue - 코드리뷰

1. <input> 태그로 파일업로드 기능을 만들어 주자

그리고 @change 이벤트를 만들어주자 (업로드된 파일이 데이터배열인 input에  담길것이다.)

그리고 ref 속성도 만들어주자 (ref 로 해당 <input> 을 콕 찝어 데이터를 연결해 줄 것이다)

상담요청 버튼을 누르면 @click 이벤트가 실행되며 모아놓은 Input 배열을 다음페이지로 넘겨줄 것이다.

 

2. data() 에는

formData로 보낼 input 이라는 오브젝트에서 image 를 추가해주자

 

3. method() 에는

<input>에서 @change 이벤트일 때 발생할 메소드를 정의해주자

- formData 로 보낼 파일을 ref 속성을 통해 콕 ! 찍어 input.image 배열에 담아주자

업로드할때마다 콘솔창을 보면 파일이 잘 담긴 것을 확인할 수 있다.

4. 확인버튼을 클릭하면 메소드가 실행된다.

router.js 에서 이름이 uploadConfirm 인 라우터의 값으로 input 오브젝트가 들어가게 된다.

→ 다음 페이지로 작성한 데이터가 넘어간다.

 

 

---

UploadConfirm.vue - 결과화면

작성한 내용과 이미지가 보인다. (이미지는 오브젝트로 보이지만 잘 넘겨받았군 ) 확인을 누르면 작성된 데이터가 백엔드로 보내질거다.

 

UploadConfirm.vue - 코드리뷰

1. 이미지 확인을 위해 콧수염템플릿에 {{ 객체 배열을 넣어 }} 화면에 표시되게 만든다.

넘겨받은 데이터를 userInput 에 담아 보여준다. 그리고 최종 확인 버튼을 누르면 @click 이벤트가 발생한다. (백엔드로 보낼 것이다)

 

2. props 에는 부모에게서 받아온 input 객체를 가져온다. (앞페이지에서 작성한 내용이 들어있음)

    data() 에는 userInput 을 선언한다. input 객체와 내용은 똑같지만 비어있다.

 

3. created() 에는

userInput 에 input 의 데이터를 그대로 주입시켜준다. 이제 userInput 은 = Input의 데이터을 가지고 있다.

 

4. 확인 버튼을 누르면 userInput 을 매개변수로 넣은 api 통신 메소드가 호출된다. 

→ api 파일의 customAPI 안에 있는 sendConsulting() 메소드가 실행

 

---

Index.js - 코드리뷰

FormData의 append()란 FormData 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가하는 메소드이다.

여기서 고민했던 점은 image 는 배열로 데이터가 들어있기 때문에, 동적으로 가져와 append() 로 어떻게 추가할 지 였다.

그래서 for 문을 통해 image 배열을 하나씩 검사하여 append로 추가하는 로직으로 진행하였다.

 

formData를 사용할 때 잊지말자 

1. formData를 선언해주고

2. append로 키값을 추가해주고

3. Content-Type 에는 꼭 multipart/form-data 를 적어주어야 한다.