feat: 添加文件上传数量限制,优化禁用状态逻辑并显示上传文件信息
This commit is contained in:
@ -81,10 +81,14 @@ const showUploadButton = computed(() => {
|
|||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const fileLimit = 2;
|
||||||
const disabled = computed(() => {
|
const disabled = computed(() => {
|
||||||
if (fileUploadRef.value?.uploadedFiles?.some((f) => f.status === 'failed')) {
|
if (fileUploadRef.value?.uploadedFiles?.some((f) => f.status === 'failed')) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
if ((fileUploadRef.value?.uploadedFileCount || 0) >= fileLimit) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -102,7 +106,7 @@ const disabled = computed(() => {
|
|||||||
accept="image/*"
|
accept="image/*"
|
||||||
:maxFileSize="1000000 * 1"
|
:maxFileSize="1000000 * 1"
|
||||||
invalidFileSizeMessage="文件 {0} 大小超过限制 {1}"
|
invalidFileSizeMessage="文件 {0} 大小超过限制 {1}"
|
||||||
:fileLimit="2"
|
:fileLimit="fileLimit"
|
||||||
invalidFileLimitMessage="最多只能上传 {0} 个文件,请移除多余文件后点击上传"
|
invalidFileLimitMessage="最多只能上传 {0} 个文件,请移除多余文件后点击上传"
|
||||||
@uploader="onUploader"
|
@uploader="onUploader"
|
||||||
:chooseButtonProps="{ size: 'small' }"
|
:chooseButtonProps="{ size: 'small' }"
|
||||||
@ -113,11 +117,6 @@ const disabled = computed(() => {
|
|||||||
<Message size="small" severity="info">请上传图片</Message>
|
<Message size="small" severity="info">请上传图片</Message>
|
||||||
</template>
|
</template>
|
||||||
<template #content="{ messages, removeFileCallback, removeUploadedFileCallback }">
|
<template #content="{ messages, removeFileCallback, removeUploadedFileCallback }">
|
||||||
<!-- slotProps.removeFileCallback -->
|
|
||||||
<!-- slotProps.removeUploadedFileCallback -->
|
|
||||||
<!-- <div>files.length: {{ files.length }}</div> -->
|
|
||||||
<!-- <div>uploadedFiles.length: {{ uploadedFiles.length }}</div> -->
|
|
||||||
<!-- <div>uploadedFileCount: {{ fileUploadRef?.uploadedFileCount }}</div> -->
|
|
||||||
<Message
|
<Message
|
||||||
size="small"
|
size="small"
|
||||||
v-for="msg of messages"
|
v-for="msg of messages"
|
||||||
@ -164,6 +163,10 @@ const disabled = computed(() => {
|
|||||||
<ProgressBar v-if="file.status === 'uploading'" :value="file.progress" />
|
<ProgressBar v-if="file.status === 'uploading'" :value="file.progress" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<div>files.length: {{ files.length }}</div>
|
||||||
|
<div>uploadedFiles.length: {{ uploadedFiles.length }}</div>
|
||||||
|
<div>uploadedFileCount: {{ fileUploadRef?.uploadedFileCount }}</div>
|
||||||
</template>
|
</template>
|
||||||
</FileUpload>
|
</FileUpload>
|
||||||
</template>
|
</template>
|
||||||
|
Reference in New Issue
Block a user