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

18
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>
@ -50,14 +44,12 @@ 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;
@ -82,5 +74,5 @@ const changeHandler = (event) => {
} }
}; };
const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || '')); const errorMessage = computed(() => fileMsg[fileMsgKey.value] || '');
</script> </script>