[VueJs + TypeScript] 이미지 파일 업로드 및 미리보기 만들기

사용툴

1. vueJS : Vite
2. typeScript
3. tailwind
4. heroIcon 

 

1. Template 영역

<template>

	<!-- input 영역  -->
    <input
    type="file"
    multiple="true"
    class="sr-only"
    @change="(event: any) => fileUpload(event)" /> 
    

    <!-- 사진 리스트 출력 영역 -->
    <div v-for="(file, i) in filesInfo" :key="i">
      <div class="bg-white mt-2 shadow-md w-full flex justify-between items-center">
        <span class="text-sm ml-2 py-2">{{ file.name }}</span>
        <XMarkIcon class="w-5 h-5 mr-2 cursor-pointer" @click="filesInfo.splice(i, 1)" />
      </div>
      <div>
        <img :src="file.src" class="w-full" />
      </div>
    </div>

</tempalate>

1. multiple = "true" 시 다중업로드를 구현할 수 있다.

 

2. Script 영역

<script setup lang="ts">

// 타입선언
type FilesInfo = {
  name: string	// 파일이름
  type: string  // 파일type이름
  size: number	// 파일 사이즈
  src: string	// preview 이미지 src
}

// 파일 업로드 
const fileUpload = (event: any) => {
  event.preventDefault()
  const fileList = event.target.files
  let formData = new FormData()
	
  // 이미지 파일만 업로드 가능하도록
  for (var i = 0; i < fileList.length; i++) {
    if (fileList[i].type.substring(0, 5) != 'image') {
      return
    }
  }
	
  for (var j = 0; j < fileList.length; j++) {
    formData.append('files', fileList[j])
    // 파일 리스트 추출을 위한 삽입
    filesInfo.value.push({
      name: fileList[j].name,
      size: fileList[j].name.size,
      type: fileList[j].type,
      src: ''
    })
    // 파일 img src 셋팅
    setImgPreview(fileList[j], j)
  }
}


// 파일 src얻기위한 인코딩
const setImgPreview = (file: any, idx: number) => {
  return new Promise((resolve) => {
    let a = new FileReader()
    a.onload = (e: any) => {
      resolve(e.target.result)
      filesInfo.value[idx].src = e.target.result
    }
    a.readAsDataURL(file)
  })
}


</script>