[VUE3] file upload , input 태그는 숨기고 버튼으로 파일 등록 처리

File Upload Custom

---

버튼 클릭 이벤트로 파일 선택 창 열기

<script setup>
import {ref} from "vue";

const dataList = ref([{},{},{},]);
const itemRefs = ref([]);
const acceptType = "*";

// 파일 선택 창 open
const uploadFile = (i)=>{
  const refName = "file" + i;
  itemRefs.value[i].click();
}

// 파일 선택 이벤트
function handleFileChange(event, i) {
  const selectedFile = event.target.files[0];
  // 또는 itemRefs.value[i].files[0]
  
  dataList.value[i].fileName = event.target.files[0].name;

  // 바로 저장하는 경우
  saveFile(selectedFile, i);
}

// 파일 저장
function saveFile (file , i){
  const formData = new FormData();
  formData.append('file',file);
  //API 호출
}
</script>

<template>
<div>
  <div class="w-100" v-for="(data,i) in dataList" :key="i" >
    <span>
      {{data.fileName}}
    <input type="file" hidden @change="handleFileChange($event,i)"
           :accept="acceptType"
           :ref="el => { itemRefs[i] = el }"/>
            <v-btn @click="uploadFile(i)">파일 업로드</v-btn>
    </span>
  </div>
</div>
</template>