[Vue] Vue에서 여러 이미지 파일 첨부 및 Base64로 img 태그에 반영하는 방법

Vue.js에서 여러 이미지 파일을 첨부하고 Base64 문자열로 변환하여 img 태그에 동적으로 표시하는 방법을 단계별로 안내해 드리겠습니다. 

- 선택된 파일 유형 검증
- 이미지 개수 제한 검사

1. HTML 템플릿 설정:

<template>
  <div>
    <input type="file" @change="onFilesChange" multiple accept="image/*">
    <div v-for="(image, index) in base64Images" :key="index">
      <img :src="image" alt="Base64 이미지">
    </div>
  </div>
</template>

2. 스크립트 설정:

import { ref } from 'vue';

export default {
  setup() {
    const MAX_IMAGES = 10; // 최대 허용 이미지 수
    
    const base64Images = ref([]); // Base64 이미지 데이터를 저장할 배열
    
    const handleFileChange = (event) => {
      const files = event.target.files; // 선택된 파일 목록

      // 선택된 파일 유형 검증 (선택적)
      if (!validateFileTypes(files)) {
        console.error('유효하지 않은 파일 유형입니다. 이미지만 선택하십시오.');
        return;
      }
      
      // 이미지 개수 제한 검사
      if (base64Images.value.length + files.length > MAX_IMAGES) {
        console.error(`최대 ${MAX_IMAGES}개의 이미지만 업로드 가능합니다.`);
        return;
      }

      for (const file of files) { // 각 파일 처리
        const reader = new FileReader(); // 파일 읽기 객체

        reader.onload = (event) => { // 파일 읽기 성공 시 이벤트 처리
          base64Images.value.push(event.target.result); // Base64 문자열 배열에 추가
        };

        reader.onerror = (error) => { // 파일 읽기 오류 시 이벤트 처리
          console.error('파일 읽기 오류:', error);
        };

        reader.readAsDataURL(file); // 파일을 Base64 문자열로 읽음
      }
    };

    // 선택된 파일 유형 검증 함수 (선택적)
    function validateFileTypes(files) {
      const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']; // 허용되는 파일 유형
      for (const file of files) {
        if (!allowedTypes.includes(file.type)) {
          return false;
        }
      }
      return true;
    }

    return {
      base64Images, // Base64 이미지 데이터
      handleFileChange // 이미지 파일 처리 함수
    };
  }
};