[Vue.js + Vuetify.js] v-file-input 예제 코드 ( multiple 포함)

떠돌이개발자Mar 24, 2023

<v-file-input> html 태그 선언

  <v-file-input
    v-model="docfile"
    :accept="fileAccept"
    color="primary accent-4"
    counter
    label="File input"
    :multiple="false"
    placeholder="파일 찾기"
    prepend-icon="mdi-paperclip"
    outlined
    :show-size="1000"
  >

v-model 바인딩용 변수 null로 초기 설정

선택한 파일을 저장할 상태를 설정하는 v-model 변수에 바인딩 처리된다.

  data: () => ({
    docfile: null,
    fileAccept: 'application/pdf',
  }),

v-file-input 선택파일 해제하는 초기화 메소드

    clearFile() {
      if (this.imgfile !== null) {
        this.imgfile = null;
      }
    },

v-file-input 파일 선택여부를 체크하는 벨리데이션 체크 함수

      // 파일업로드 실행
      if (!this.imgfile) {
        this.openAlertDialog({ status: 'VALIDATION', body: '이미지 파일를 선택하세요.' });
        return;
      }

v-file-input 선택 파일 정보 console로그 확인방법

console.log('files', this.imgfile);

[v-file-input 파임첨부 다이얼로그.vue 전체 코드]

<template>
  <v-row justify="center">
    <v-dialog
      v-model="visible"
      :fullscreen="$vuetify.breakpoint.xsOnly"
      max-width="30%"
      persistent
      hide-overlay
      transition="dialog-bottom-transition"
      scrollable
    >
      <v-card>
        <v-card-title class="pa-2">
          {{ this.title }}
          <v-spacer></v-spacer>
          <v-btn icon @click="close()">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-card-title>
        <v-divider></v-divider>
        <v-card @scroll="scroll($event)">
          <v-row class="pt-2 mx-0">
            <v-col class="py-0 px-1 disp-inherit" cols="12" lg="12" md="12" sm="12" xs="12">
              <label class="pt-1 content-label">이미지</label>
              <v-file-input ref="refFile"
                v-model="imgfile"
                accept="image/png, image/jpeg, image/bmp"
                color="primary accent-4"
                counter
                label="파일 찾기"
                placeholder="파일 찾기"
                prepend-icon="photo"
                outlined
                :show-size="1000"
              >
                <template v-slot:selection="{ index, text }">
                  <v-chip
                    color="primary accent-4"
                    dark
                    label
                    small
                  >
                    {{ text }}
                  </v-chip>
                </template>
              </v-file-input>
            </v-col>
          </v-row>

        </v-card>

      <v-card-actions class="pa-0 pb-2 px-2 pt-1">
        <v-btn outlined @click="close()">취소</v-btn>
        <v-spacer></v-spacer>
        <v-btn color="primary" @click="submit()">확인</v-btn>
      </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
export default {
  name: 'FileUploadDialog',
  props: {
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
      default: '파일 첨부',
    },
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data: () => ({
    imgfile: null,
    fileType: '01',
    fileAccept: 'application/pdf',
  }),
  methods: {
    // <input type="file" @change="onFileChange"> 사용시
    // onFileChange(e) {
    //   const files = e.target.files || e.dataTransfer.files;
    //   alert(files.length);
    // },
    changeFileType() {
      switch (this.fileType) {
        case '01':
          this.fileAccept = 'application/pdf';
          break;
        case '02':
          this.fileAccept = 'video/mp4';
          break;
        case '03':
          this.fileAccept = 'text/html';
          break;
        default:
          this.fileAccept = '';
      }
    },
    clearFile() {
      if (this.imgfile !== null) {
        this.imgfile = null;
      }
      if (this.docfile !== null) {
        this.docfile = null;
      }
    },
    submit() {
      console.log('files', this.imgfile);
      // 파일업로드 실행
      if (!this.imgfile) {
        this.openAlertDialog({ status: 'VALIDATION', body: ' 대표 이미지 파일를 선택하세요.' });
        return;
      }

      const formData = new FormData();
      for (let i = 0; i < this.imgfile.length; i += 1) {
        const file = this.imgfile[i];
        formData.append(`files[${i}]`, file);
      }

      for (let i = 0; i < this.docfile.length; i += 1) {
        const file = this.docfile[i];
        formData.append(`files[${i}]`, file);
      }
      this.$emit('close', formData);
    },
    close() {
      this.clearFile();
      this.$emit('close');
    },
  },
};
</script>

여러개의 파일을 선택하고자는 경우에는 multiple 속성을 추가해주면 된다.

  <v-file-input
    v-model="docfile"
    :accept="fileAccept"
    color="primary accent-4"
    counter
    label="File input"
    multiple
    placeholder="파일 찾기"
    prepend-icon="mdi-paperclip"
    outlined
    :show-size="1000"
  >