[ssafy] 1학기 관통프로젝트 - 1일차

✅ 1 일차 : 파일업로드 프리뷰 기능 구현

❗️ Issue 

React Slick 라이브러리 사용 시,
Vue3 + Spring boot로 파일업로드 프리뷰 기능 구현하려니 

Vue3에는 form 데이터로 enctype ~으로 보낼 수 없다. 

그대신 axios로 통신해야하는데 헤더를 지정해야한다. (내일 할 예정)

그리고 해당 그림파일을 프리뷰하려면 @change 로 e.target.files로 확인 후

const reader = new FileReader(); 및 reader.readAsDataURL(file);로 확인할 수 있다.

 

 

 

💡 Solution 

<img class="m-3 col-auto"
				v-for="(previewImage, index) in previewImages"
				:key="index"
				:src="previewImage"
				style="height: 200px; width: 300px; object-fit: cover"
/>

 

 

<script setup>
const upload = (event) => {
	if (event.target.files.length > 5) {
		alert("사진은 최대 5개 까지 첨부가능합니다.");
	} else {
		for (const file of event.target.files) {
			const reader = new FileReader();
			reader.onload = (e) => {
				previewImages.value.push(e.target.result);
			};
			reader.readAsDataURL(file);
		}
	}
	// 사용자가 올린 이미지
	console.log(event.target.files);
};
</script>