zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为上传组件增加了文件数量和大小限制及上传前校验

Browse Source
This commit is contained in:
Wei_佳 2025-12-02 16:39:23 +08:00
parent 17d275e18c
commit 253ed14c87
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web1/src/views/pages/index.vue
View File

@ -298,7 +298,9 @@
<n-upload
:action="actionUrl"
:default-file-list="modalForm.inheritor_certificates"
:max="uploadLimit"
list-type="image-card"
:on-before-upload="(options) => handleBeforeUpload(options, 'inheritor_certificates')"
@finish="handleFinish3"
@remove="delete3"
>
@ -402,9 +404,11 @@
<n-upload
:action="actionUrl"
:default-file-list="modalForm.patent_certificates"
:max="uploadLimit"
@finish="handleFinish1"
@remove="delete1"
list-type="image-card"
:on-before-upload="(options) => handleBeforeUpload(options, 'patent_certificates')"
>
<div>
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
@ -435,9 +439,11 @@
<n-upload
:action="actionUrl"
:default-file-list="modalForm.pattern_images"
:max="uploadLimit"
@finish="handleFinish2"
@remove="delete2"
list-type="image-card"
:on-before-upload="(options) => handleBeforeUpload(options, 'pattern_images')"
>
<div>
<img style="width: 24px; height: 24px" src="@/assets/images/upload.png" alt="" />
@ -933,6 +939,8 @@ const steps = [
]
const loading = ref(false)
const actionUrl = 'https://value.cdcee.net/api/v1/upload/file'
const uploadLimit = 10
const uploadMaxSize = 20 * 1024 * 1024
const currentStep = ref(0)
const historyList = ref([])
const modalForm = reactive({
@ -1411,10 +1419,28 @@ const handleFinish2 = (file) => {
modalForm.pattern_images.push({ url: response.data.url, id: file.file.batchId })
}
const handleFinish3 = (file) => {
console.log(file)
let response = JSON.parse(file.event.target.response)
modalForm.inheritor_certificates.push({ url: response.data.url, id: file.file.batchId })
}
type UploadKey = 'inheritor_certificates' | 'patent_certificates' | 'pattern_images'
const handleBeforeUpload = (options: any, key: UploadKey) => {
const map: Record<UploadKey, any[]> = {
inheritor_certificates: modalForm.inheritor_certificates,
patent_certificates: modalForm.patent_certificates,
pattern_images: modalForm.pattern_images,
}
const currentList = map[key] || []
if (currentList.length >= uploadLimit) {
message.error(`最多上传${uploadLimit}张`)
return false
}
const size = options?.file?.file?.size || 0
if (size > uploadMaxSize) {
message.error('单张文件大小不能超过20M')
return false
}
return true
}
const delete1 = (file) => {
const index = modalForm.patent_certificates.findIndex((item) => item.id === file.file.batchId)
if (index !== -1) {
@ -1432,7 +1458,6 @@ const delete3 = (file) => {
if (index !== -1) {
modalForm.inheritor_certificates.splice(index, 1)
}
console.log(modalForm.inheritor_certificates)
}
const previousStep = () => {
console.log(modalForm)