[Vue.js 3 + Vuetify 3] File inputs (Component) 사용법

안녕하세요, 오늘은 Vuetify 3에서 File inputs (Component)을 사용하는 방법에 대해서 알아보겠습니다.

 

https://vuetifyjs.com/

Vuetify — A Vue Component Framework

 

File inputs (Component)를 다양한 예시들을 활용한 결과는 다음과 같습니다.

 

<template>
  <v-file-input label="File input"></v-file-input>
  <v-file-input label="File input" variant="outlined"></v-file-input>
  <v-file-input label="File input" variant="underlined"></v-file-input>
  <v-file-input label="File input" variant="solo"></v-file-input>
  <v-file-input label="File input" variant="solo-filled"></v-file-input>
  <v-file-input label="File input" variant="solo-inverted"></v-file-input>
  <v-file-input accept="image/*" label="File input"></v-file-input>
  <v-file-input label="File input w/ chips" chips multiple></v-file-input>
  <v-file-input label="File input" counter multiple show-size></v-file-input>
  <v-file-input density="compact" label="File input"></v-file-input>
</template>

 

실행 결과

 

위의 코드에서 variant 값의 따라서 디자인이 위의 예시 처럼 변화하는 것을 확인할 수 있으며, accept 옵션은 특정 파일 format이나 타입을 지정할 수 있습니다. 그리고, counter 옵션은 업로드 한 파일들의 수를, multiple 옵션은 다수의 파일 선택할 수 있게, 그리고 show-size는 해당 파일들의 size를 확인할 수 있습니다.

 

---

이어서, 조금 더 복잡한 Case에 대해서 알아보겠습니다.

 

<template>
  <v-file-input
    v-model="files"
    :show-size="1000"
    color="deep-purple-accent-4"
    label="File input"
    placeholder="Select your files"
    prepend-icon="mdi-paperclip"
    variant="outlined"
    counter
    multiple
  >
    <template v-slot:selection="{ fileNames }">
      <template v-for="(fileName, index) in fileNames" :key="fileName">
        <v-chip
          v-if="index < 2"
          class="me-2"
          color="deep-purple-accent-4"
          size="small"
          label
        >
          {{ fileName }}
        </v-chip>

        <span
          v-else-if="index === 2"
          class="text-overline text-grey-darken-3 mx-2"
        >
          +{{ files.length - 2 }} File(s)
        </span>
      </template>
    </template>
  </v-file-input>
</template>

 

<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      files: [],
    }
  },

}
</script>

 

위의 코드에 대한 실행 결과는 다음과 같습니다. 첨부 파일들 중 처음 2개의 파일을 시각화 하며, 3개 이상이여서 2개를 초과하는 파일 개수에 대해서는 요약하여 우측에 표시하게 됩니다.

실행 결과

 

---

 

이상으로, Vuetify 3에서 File inputs (Component)를 사용하는 방법에 대해서 알아보았습니다.

감사드립니다.