多图片支持一次选多张

后台管理/src/components/ZupTypes/index.tsx

@@ -46,6 +46,7 @@ type Props = {
   isUpName?: boolean //是否能修改图片名字
   lastImgTxt?: string //加载最后面的上传提示
   oneIsCover?: boolean //是否将第一张作为封面
+  multipleImg?: boolean // 新增参数：是否支持多张图片同时上传
 }
 
 function ZupTypes(
@@ -64,7 +65,8 @@ function ZupTypes(
     isTypeShow = false,
     isUpName = false,
     lastImgTxt = '',
-    oneIsCover = false
+    oneIsCover = false,
+    multipleImg = false
   }: Props,
   ref: any
 ) {
@@ -127,10 +129,24 @@ function ZupTypes(
   // 上传附件的处理函数
   const handeUpPhoto2 = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        // 拿到files信息
-        const filesInfo = e.target.files[0]
+      if (!e.target.files || e.target.files.length === 0) return
+
+      // 新增：多选模式下获取所有文件 [2,6](@ref)
+      let files =
+        multipleImg && fileOneType === 'img' ? Array.from(e.target.files) : [e.target.files[0]]
+
+      // 新增：检查图片数量限制 [4](@ref)
+      if (fileOneType === 'img' && multipleImg) {
+        const remainingSlots = imgLength - fileList.img.length
+        if (files.length > remainingSlots) {
+          MessageFu.warning(`最多还能上传${remainingSlots}张图片`)
+          files = files.slice(0, remainingSlots)
+        }
+      }
 
+      // 批量处理文件 [4](@ref)
+      for (const file of files) {
+        // 原有的校验逻辑（格式、大小等）保持不变...
         let anType = ['image/jpeg', 'image/png']
         let anTit1 = '只支持png、jpg格式!'
         let anTit2 = `最大支持${imgSize}M!`
@@ -155,62 +171,78 @@ function ZupTypes(
 
         // 校验格式
         if (fileOneType !== 'model') {
-          if (!anType.includes(filesInfo.type)) {
+          if (!anType.includes(file.type)) {
             e.target.value = ''
             return MessageFu.warning(anTit1)
           }
         } else {
-          if (!filesInfo.name.includes('.4dage')) {
+          if (!file.name.includes('.4dage')) {
             e.target.value = ''
             return MessageFu.warning(anTit1)
           }
         }
 
         // 校验大小
-        if (filesInfo.size > anSize) {
+        if (file.size > anSize) {
           e.target.value = ''
           return MessageFu.warning(anTit2)
         }
-        // 创建FormData对象
+        // 创建FormData
         const fd = new FormData()
-        // 把files添加进FormData对象（‘photo’为后端需要的字段）
         fd.append('type', fileOneType)
         fd.append('dirCode', dirCode)
         fd.append('isDb', 'true')
-
         //初始图片 fileName为：未命名
         if (isUpName) {
           fd.append('isDefaultName', 'false')
         }
 
-        fd.append('file', filesInfo)
+        fd.append('file', file)
 
-        if (fileOneType === 'img' && filesInfo.size > 1 * 1024 * 1024) {
+        if (fileOneType === 'img' && file.size > 1 * 1024 * 1024) {
           // 开启压缩图片
           fd.append('isCompress', 'true')
         }
 
         e.target.value = ''
 
-        const res = await API_upFile(fd, myUrl)
-
         try {
+          const res = await API_upFile(fd, myUrl)
           if (res.code === 0) {
-            MessageFu.success('上传成功!')
-            if (fileOneType === 'img')
-              setFileList({
-                ...fileList,
-                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
-              })
-            else setFileList({ ...fileList, [fileOneType]: res.data })
+            MessageFu.success(
+              `上传成功${files.length > 1 ? `(${files.indexOf(file) + 1}/${files.length})` : ''}`
+            )
+
+            // 更新状态
+            if (fileOneType === 'img') {
+              setFileList(prev => ({
+                ...prev,
+                img: [...prev.img, { ...res.data, imgName: '未命名' }]
+              }))
+            } else {
+              setFileList(prev => ({ ...prev, [fileOneType]: res.data }))
+            }
+            fileDomInitialFu()
           }
-          fileDomInitialFu()
         } catch (error) {
+          // 错误处理
           fileDomInitialFu()
         }
       }
     },
-    [audioSize, dirCode, fileList, fileOneType, imgSize, isUpName, modelSize, myUrl, videoSize]
+    [
+      audioSize,
+      dirCode,
+      fileList.img.length,
+      fileOneType,
+      imgLength,
+      imgSize,
+      isUpName,
+      modelSize,
+      multipleImg,
+      myUrl,
+      videoSize
+    ]
   )
 
   // 附件图片的拖动
@@ -436,6 +468,7 @@ function ZupTypes(
         }
         ref={myInput}
         onChange={e => handeUpPhoto2(e)}
+        multiple={fileOneType === 'img' && multipleImg}
       />
       <div hidden={isTypeShow}>
         <Checkbox.Group
@@ -526,7 +559,7 @@ function ZupTypes(
             </>
           ) : null}
           {oneIsCover ? '第一张为封面图；' : ''} 支持png、jpg的图片格式；最大支持{imgSize}
-          M；最多支持{imgLength}张。
+          M；最多支持{imgLength}张。{multipleImg ? '按住Ctrl可一次性选择多张图片上传' : ''}
           {lastImgTxt}
         </div>
       </div>

后台管理/src/pages/A1record/A1add/index.tsx

@@ -266,6 +266,7 @@ function A1add({ sId, closeFu, addTableFu, upTableFu }: Props) {
                 <div className='formLeft'>图片：</div>
                 <div className='formRight'>
                   <ZupTypes
+                    multipleImg={true}
                     ref={ZupImgsRef}
                     isLook={false}
                     fileCheck={false}

后台管理/src/pages/A1record/A1look/index.tsx

@@ -130,6 +130,7 @@ function A1look({ sId }: Props) {
                 <div className='A1top1RR'>
                   {info.img.length === 0 ? '（空）' : ''}
                   <ZupTypes
+                    multipleImg={true}
                     ref={ZupImgsRef}
                     isLook={true}
                     fileCheck={false}

后台管理/src/pages/A2clue/A2add/index.tsx

@@ -195,6 +195,7 @@ function A2add({ sId, closeFu, addTableFu, upTableFu, listAllRes, martyrId }: Pr
                 <div className='formLeft'>图片：</div>
                 <div className='formRight'>
                   <ZupTypes
+                    multipleImg={true}
                     ref={ZupImgsRef}
                     isLook={false}
                     fileCheck={false}

后台管理/src/pages/A3clan/A3add/index.tsx

@@ -232,6 +232,7 @@ function A3add({ sId, closeFu, addTableFu, upTableFu, listAllRes, myMartyrId }:
                 <div className='formLeft'>图片：</div>
                 <div className='formRight'>
                   <ZupTypes
+                    multipleImg={true}
                     ref={ZupImgsRef}
                     isLook={false}
                     fileCheck={false}

后台管理/src/pages/A4antique/A4add/index.tsx

@@ -131,6 +131,7 @@ function A4add({ sId, closeFu, addTableFu, upTableFu, listAllRes, martyrId }: Pr
                 <div className='formLeft'>图片：</div>
                 <div className='formRight'>
                   <ZupTypes
+                    multipleImg={true}
                     ref={ZupImgsRef}
                     isLook={false}
                     fileCheck={false}