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

web1/src/views/pages/index.vue

@@ -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)