localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

첨부파일 변경

Browse Source
This commit is contained in:
nevermoregb 2025-03-27 12:07:59 +09:00
parent cdb40ed942
commit 92b7d5d4ac
1 changed files with 57 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/input/FormFile.vue
View File

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