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">
<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
/>
<label :for="inputId" class="btn btn-label-primary">파일 선택</label>
<input class="form-control" type="file" style="display: none" :id="inputId" ref="fileInput" @change="changeHandler" multiple />
<div v-if="showError" class="text-danger mt-1">
{{ errorMessage }}
</div>
@ -18,69 +12,67 @@
</template>
<script setup>
import { ref ,computed} from 'vue';
import { fileMsg } from '@/common/msgEnum';
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');
// 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 emits = defineEmits(['update:data', 'update:isValid']);
const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
const MAX_FILE_COUNT = 5; // 최대 파일 개수
const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
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 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);
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))
: [];
// 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);
}
};
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] || ''));
const errorMessage = computed(() => fileMsg[fileMsgKey.value] || '');
</script>