87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<template>
|
|
<div class="mb-4 row">
|
|
<label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
|
|
<div class="col-md-10">
|
|
<input
|
|
class="form-control"
|
|
type="file"
|
|
:id="inputId"
|
|
ref="fileInput"
|
|
@change="changeHandler"
|
|
multiple
|
|
/>
|
|
<div v-if="showError" class="text-danger mt-1">
|
|
{{ errorMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref ,computed} from 'vue';
|
|
import { fileMsg } from '@/common/msgEnum';
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '라벨',
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: 'fileInput',
|
|
required: true,
|
|
},
|
|
isAlert: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
});
|
|
const inputId = computed(() => props.name || 'defaultFileInput');
|
|
|
|
const emits = defineEmits(['update:data', 'update:isValid']);
|
|
|
|
const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
|
|
const MAX_FILE_COUNT = 5; // 최대 파일 개수
|
|
const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
|
|
|
|
const showError = ref(false);
|
|
const fileMsgKey = ref(''); // 에러 메시지 키
|
|
|
|
const changeHandler = (event) => {
|
|
const files = Array.from(event.target.files);
|
|
const totalSize = files.reduce((sum, file) => sum + file.size, 0);
|
|
|
|
// ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
|
|
const invalidFiles = ALLOWED_FILE_TYPES.length > 0
|
|
? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type))
|
|
: [];
|
|
|
|
if (totalSize > MAX_TOTAL_SIZE) {
|
|
showError.value = true;
|
|
fileMsgKey.value = 'FileMaxSizeMsg';
|
|
emits('update:data', []);
|
|
emits('update:isValid', false);
|
|
} else if (files.length > MAX_FILE_COUNT) {
|
|
showError.value = true;
|
|
fileMsgKey.value = 'FileMaxLengthMsg';
|
|
emits('update:data', []);
|
|
emits('update:isValid', false);
|
|
} else if (invalidFiles.length > 0) {
|
|
showError.value = true;
|
|
fileMsgKey.value = 'FileNotTypeMsg';
|
|
emits('update:data', []);
|
|
emits('update:isValid', false);
|
|
} else {
|
|
showError.value = false;
|
|
fileMsgKey.value = '';
|
|
emits('update:data', files);
|
|
emits('update:isValid', true);
|
|
}
|
|
};
|
|
|
|
const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
|
|
</script>
|