多文件上传

src/views/common/UploadMoreFile.vue

@@ -4,36 +4,13 @@
             :before-upload="beforeUpload" :on-remove="handleRemove" :on-change="handleFileChange"
             :on-exceed="handleExceed" :file-list="files" :accept="accept" :limit="limitUploadNum"
             :auto-upload="autoUpload" :http-request="customUpload">
+
             <div class="upload-content">
-                <!-- 当只有一张图片时显示缩略图 -->
-                <div v-if="showImagePreview" class="image-preview">
-                    <img :src="previewImageUrl" :alt="previewImageName" class="preview-thumbnail" />
-                    <div class="preview-overlay">
-                        <div class="preview-text">
-                            <div class="main-text">点击更换图片</div>
-                            <div class="tip-text">或拖拽新图片到此处</div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 当只有一个文档文件时显示文件图标 -->
-                <div v-else-if="showFilePreview" class="file-preview">
-                    <div class="file-icon-container">
-                        <i :class="getFileIconClass()" class="file-icon"></i>
-                        <div class="file-name">{{ previewFileName }}</div>
-                    </div>
-                    <div class="preview-overlay">
-                        <div class="preview-text">
-                            <div class="main-text">点击更换文件</div>
-                            <div class="tip-text">或拖拽新文件到此处</div>
-                        </div>
-                    </div>
-                </div>
-
                 <!-- 默认上传区域 -->
-                <div v-else class="upload-text">
+                <div class="upload-text">
                     <div class="main-text"> + 点击或将文件拖拽到这里上传</div>
                     <div class="tip-text">
+                        <div>最多可上传 {{ limitUploadNum }} 个文件，</div>
                         <div>单份文件大小上限 {{ maxFileTips }}，</div>
                         <div>支持文件类型：{{ uploadType }}</div>
                     </div>
@@ -50,6 +27,7 @@ import {
     uploadSmallFile,
     uploadLargeFile,
 } from '@/api/common/uploadFile.js'
+
 export default {
     name: 'UploadFile',
     props: {
@@ -67,7 +45,7 @@ export default {
         },
         limitUploadNum: {
             type: Number,
-            default: 1,
+            default: 5,
         },
         fileUploadRule: {
             type: Object,
@@ -85,39 +63,22 @@ export default {
     data() {
         return {
             files: [],
-            previewImageUrl: '',
+            isUploading: false,
-            previewImageName: '',
+            uploadingFiles: new Set(),
-            previewFileName: '',
+            defaultFileSize: 1024 * 1024 * 5,
-            previewFileType: '',
+            uploadControllers: new Map(),
-            isUploading: false, // 添加上传状态标识
-            defaultFileSize: 1024 * 1024 * 5, // 默认文件大小5MB 超过5MB算大文件上传
-            skipNextChange: false,
         }
     },
     computed: {
-        // 是否显示图片预览
-        showImagePreview() {
-            return this.previewImageUrl && this.files.length === 1
-        },
-        // 是否显示文件预览
-        showFilePreview() {
-            return (
-                this.previewFileName &&
-                this.previewFileType &&
-                this.files.length === 1
-            )
-        },
         accept() {
             return this.uploadType
                 .split('、')
                 .map((type) => `.${type}`)
                 .join(',')
         },
-        // 获取支持的文件类型数组
         allowedTypes() {
             return this.uploadType.split('、')
         },
-        // 获取文件大小限制（转换为MB数字）
         maxSizeMB() {
             const sizeStr = this.maxFileTips.toLowerCase()
             if (sizeStr.includes('mb')) {
@@ -129,7 +90,6 @@ export default {
             }
             return 20
         },
-        // 获取MIME类型映射
         mimeTypes() {
             const typeMap = {
                 png: 'image/png',
@@ -148,15 +108,11 @@ export default {
         fileList: {
             handler(newVal) {
                 if (this.files.length === 0 && newVal.length > 0) {
-                    // 使用 $nextTick 确保 DOM 更新完成
                     this.$nextTick(() => {
-                        // 直接设置上传组件的内部文件列表
                         if (this.$refs.upload) {
                             this.$refs.upload.uploadFiles = this.formatFileList(newVal)
                         }
                         this.files = this.formatFileList(newVal)
-                        // 单独处理预览
-                        this.handlePreviewFromExternal(newVal)
                     })
                 }
             },
@@ -166,20 +122,9 @@ export default {
     },
     methods: {
         beforeUpload(file) {
-            // 如果正在上传中，阻止新的上传
-            if (this.isUploading) {
-                this.$message.warning('当前有文件正在上传，请稍后再试')
-                return false
-            }
-
-            // 验证文件类型
             const fileExtension = file.name.split('.').pop().toLowerCase()
             const isAllowedType = this.allowedTypes.includes(fileExtension)
-
-            // 验证MIME类型（额外验证）
             const isAllowedMimeType = this.mimeTypes.includes(file.type)
-
-            // 验证文件大小
             const isLtMaxSize = file.size / 1024 / 1024 < this.maxSizeMB
 
             if (!isAllowedType || !isAllowedMimeType) {
@@ -192,150 +137,209 @@ export default {
                 return false
             }
 
+            if (this.files.length >= this.limitUploadNum) {
+                this.$message.error(`最多只能上传 ${this.limitUploadNum} 个文件!`)
+                return false
+            }
+
             return true
         },
-        // 文件状态改变
+
         handleFileChange(file, fileList) {
-            // 如果文件状态是移除或失败或者成功，不处理
             if (file.status === 'removed' || file.status === 'fail' || file.status === 'success') {
-                console.log('现在的文件：', this.files);
                 return
             }
-            // 更新文件列表
+
             this.files = this.formatFileList(fileList)
-            // 生成预览
+
-            if (file.raw && fileList.length === 1) {
+            if (this.autoUpload && file.status === 'ready' && !this.isUploading) {
-                if (this.isImageFile(file.raw)) {
+                this.$nextTick(() => {
-                    // 图片预览
+                    this.uploadFile(file)
-                    this.generateImagePreview(file.raw)
+                })
-                } else if (this.isDocumentFile(file.raw)) {
-                    // 文档预览
-                    this.generateDocumentPreview(file.raw)
-                }
-            } else {
-                // 如果不是单个文件，清除预览
-                this.clearPreview()
             }
         },
 
-        // 添加上传成功的处理
+        async uploadFile(file) {
-        handleSuccess(response, file) {
+            if (this.uploadingFiles.has(file.uid)) {
-            this.$bus.$emit('endUpload')
+                return
-            // 更新文件状态为成功
-            this.updateFileStatus(file.uid, 'success', '', response.data, 100)
-            // 触发文件变化事件
-            this.$emit('file-change', this.getCurrentFiles(), this.type)
-            // 重置上传状态
-            this.isUploading = false
-        },
-
-        // 添加上传失败的处理
-        handleError(error, file) {
-            console.error('上传失败:', error)
-            this.$bus.$emit('endUpload')
-            // 上传失败，移除文件
-            this.removeFailedFile(file.uid)
-            // 重置上传状态
-            this.isUploading = false
-        },
-        // 自定义上传逻辑
-        async customUpload(options) {
-            console.log(options);
-
-            const { file } = options;
-            // 设置上传状态
-            this.isUploading = true;
-            const formData = new FormData();
-            formData.append('file', file);
-            formData.append('params', JSON.stringify(this.fileUploadRule));
-
-            // 从 el-upload 的文件列表中查找对应的完整文件对象
-            const uploadFileObj = this.findFileByRawFile(file);
-            if (!uploadFileObj) {
-                console.error('未找到对应的文件对象');
-                this.handleError(new Error('文件对象不存在'), file);
-                return;
             }
 
-            const fileUid = uploadFileObj.uid;
+            const controller = new AbortController()
+            this.uploadControllers.set(file.uid, controller)
+            this.uploadingFiles.add(file.uid)
+            this.isUploading = true
+
+            const formData = new FormData()
+            formData.append('file', file.raw)
+            formData.append('params', JSON.stringify(this.fileUploadRule))
 
-            // 更新文件状态为上传中，并设置初始进度为 0
             this.updateFileStatus(
-                fileUid,
+                file.uid,
                 'uploading',
                 this.fileUploadRule.fields_json ? '识别中' : '上传中',
                 null,
                 0,
-            );
+            )
 
             try {
                 this.$bus.$emit(
                     'startUpload',
                     this.fileUploadRule.fields_json ? '识别中' : '上传中',
-                );
+                )
 
-                let res = null;
+                let res = null
                 if (this.defaultFileSize < file.size) {
                     if (this.fileUploadRule.fields_json) {
-                        res = await uploadLargeFileByOcr(formData);
+                        res = await uploadLargeFileByOcr(formData, {
+                            signal: controller.signal,
+                            onUploadProgress: (progressEvent) => {
+                                if (progressEvent.lengthComputable) {
+                                    const percentComplete = Math.round(
+                                        (progressEvent.loaded * 100) / progressEvent.total
+                                    )
+                                    this.updateFileStatus(file.uid, 'uploading', '', null, percentComplete)
+                                }
+                            }
+                        })
                     } else {
-                        res = await uploadLargeFile(formData);
+                        res = await uploadLargeFile(formData, {
+                            signal: controller.signal,
+                            onUploadProgress: (progressEvent) => {
+                                if (progressEvent.lengthComputable) {
+                                    const percentComplete = Math.round(
+                                        (progressEvent.loaded * 100) / progressEvent.total
+                                    )
+                                    this.updateFileStatus(file.uid, 'uploading', '', null, percentComplete)
+                                }
+                            }
+                        })
                     }
                 } else {
                     if (this.fileUploadRule.fields_json) {
-                        res = await uploadSmallFileByOcr(formData);
+                        res = await uploadSmallFileByOcr(formData, {
+                            signal: controller.signal
+                        })
                     } else {
-                        res = await uploadSmallFile(formData);
+                        res = await uploadSmallFile(formData, {
+                            signal: controller.signal
+                        })
                     }
                 }
+
                 if (res.code === 200) {
-                    this.handleSuccess(res, uploadFileObj);
+                    this.handleSuccess(res, file)
                 } else {
-                    this.handleError(new Error(res.message || '上传失败'), uploadFileObj);
+                    this.handleError(new Error(res.message || '上传失败'), file)
                 }
             } catch (err) {
-                this.handleError(err, uploadFileObj);
+                if (err.name === 'AbortError') {
+                    console.log('上传已取消:', file.name)
+                } else {
+                    this.handleError(err, file)
+                }
             } finally {
-                // 无论成功失败，都重置上传状态
+                this.uploadingFiles.delete(file.uid)
-                this.isUploading = false;
+                this.uploadControllers.delete(file.uid)
+                this.isUploading = this.uploadingFiles.size > 0
+            }
+        },
+
+        async customUpload(options) {
+            const { file } = options
+            const uploadFileObj = this.findFileByRawFile(file)
+            if (!uploadFileObj) {
+                console.error('未找到对应的文件对象')
+                return
+            }
+            this.uploadFile(uploadFileObj)
+        },
+
+        handleSuccess(response, file) {
+            this.$bus.$emit('endUpload')
+            this.updateFileStatus(file.uid, 'success', '', response.data, 100)
+            this.$emit('file-change', this.getCurrentFiles(), this.type)
+        },
+
+        handleError(error, file) {
+            console.error('上传失败:', error)
+            this.$bus.$emit('endUpload')
+            this.updateFileStatus(file.uid, 'fail', error.message)
+            this.$emit('file-change', this.getCurrentFiles(), this.type)
+        },
+
+        handleExceed(files, fileList) {
+            this.$message.warning(`最多只能上传 ${this.limitUploadNum} 个文件，已自动截取前 ${this.limitUploadNum} 个文件`);
+
+            // 将 FileList 转换为数组
+            const filesArray = Array.from(files);
+            const remainingSlots = this.limitUploadNum - this.files.length;
+
+            if (remainingSlots > 0) {
+                const filesToAdd = filesArray.slice(0, remainingSlots);
+                filesToAdd.forEach(file => {
+                    const newFileObj = this.createFileObject(file);
+                    this.files.push(newFileObj);
+
+                    if (this.autoUpload) {
+                        this.$nextTick(() => {
+                            this.uploadFile(newFileObj);
+                        });
+                    }
+                });
+            }
+        },
+
+        handleRemove(file, fileList) {
+            if (file == null) {
+                return true
+            }
+
+            if (file.status === 'uploading') {
+                this.cancelUpload(file)
+            }
+
+            const delFileObj = this.findFileByRawFile(file.raw)
+            if (delFileObj) {
+                delFileObj.response = delFileObj.res
+                this.$emit('del-file', delFileObj)
+            }
+
+            this.files = this.formatFileList(fileList)
+            this.$emit('file-change', this.getCurrentFiles(), this.type)
+            return true
+        },
+
+        cancelUpload(file) {
+            const controller = this.uploadControllers.get(file.uid)
+            if (controller) {
+                controller.abort()
+            }
+            this.updateFileStatus(file.uid, 'fail', '上传已取消')
+            this.uploadingFiles.delete(file.uid)
+            this.uploadControllers.delete(file.uid)
+        },
+
+        createFileObject(file) {
+            return {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                raw: file,
+                uid: Date.now() + Math.random(),
+                status: 'ready',
+                percentage: 0,
             }
         },
 
-        // 通过原始文件对象查找对应的上传文件对象
         findFileByRawFile(rawFile) {
             return this.files.find(item =>
                 item.raw === rawFile ||
                 (item.name === rawFile.name && item.size === rawFile.size)
-            );
-        },
-        // 移除上传失败的文件
-        removeFailedFile(fileUid) {
-            console.log('移除上传失败的文件:', fileUid)
-            const fileIndex = this.files.findIndex(
-                (item) => item.uid === fileUid,
             )
-            if (fileIndex !== -1) {
-                // 从文件列表中移除
-                this.files.splice(fileIndex, 1)
-                console.log('移除失败文件后的文件列表:', this.files)
-                // 清除预览
-                this.clearPreview()
-                // 触发文件变化事件
-                this.$emit('file-change', this.getCurrentFiles(), this.type)
-            }
         },
 
-        // 更新文件状态
+        updateFileStatus(fileUid, status, statusText, responseData = null, percentage = null) {
-        updateFileStatus(
+            const fileIndex = this.files.findIndex(item => item.uid === fileUid)
-            fileUid,
-            status,
-            statusText,
-            responseData = null,
-            percentage = null,
-        ) {
-            const fileIndex = this.files.findIndex(
-                (item) => item.uid === fileUid,
-            )
             if (fileIndex !== -1) {
                 const updatedFile = {
                     ...this.files[fileIndex],
@@ -346,119 +350,26 @@ export default {
                     updatedFile.statusText = statusText
                 }
 
-                // 确保 percentage 是有效的数字（0-100）
+                if (percentage !== null && percentage >= 0 && percentage <= 100) {
-                if (
-                    percentage !== null &&
-                    percentage >= 0 &&
-                    percentage <= 100
-                ) {
                     updatedFile.percentage = percentage
                 } else if (status === 'uploading') {
-                    // 上传中状态默认设置进度为 0
                     updatedFile.percentage = 0
                 } else if (status === 'success') {
-                    // 成功状态设置进度为 100
                     updatedFile.percentage = 100
                 }
 
                 if (responseData) {
-                    // 保存服务器返回的文件信息
+                    updatedFile.response = responseData
-                    updatedFile.response = responseData;
+                    updatedFile.response.businessType = this.fileUploadRule?.fileUploadType
-                    updatedFile.response.businessType =
+                    updatedFile.res = updatedFile.response
-                        this.fileUploadRule?.fileUploadType;
-                    updatedFile.res = updatedFile.response;
                 }
 
-                // 使用 Vue.set 确保响应式更新
                 this.$set(this.files, fileIndex, updatedFile)
-                console.log('更新后的文件列表:', this.files)
-            } else {
-                console.warn('未找到要更新的文件:', fileUid)
             }
         },
 
-        // 处理文件超出限制
-        handleExceed(files, fileList) {
-            console.log('文件超出限制处理', files, fileList)
-            // 当文件数量超出限制时，用新文件替换旧文件
-            if (files.length > 0) {
-                // 触发文件删除事件
-                this.$emit('del-file', { ...fileList[0], response: fileList[0].res })
-
-                // 清空原有文件列表
-                this.files = []
-
-                // 手动触发新文件的上传流程
-                const newFile = files[0]
-                // 创建新的文件对象，确保包含 percentage
-                const newFileObj = {
-                    name: newFile.name,
-                    size: newFile.size,
-                    type: newFile.type,
-                    raw: newFile,
-                    uid: Date.now(), // 生成新的uid
-                    status: 'ready',
-                    percentage: 0, // 添加默认进度
-                }
-
-                // 更新文件列表
-                this.files = [newFileObj]
-
-                // 生成预览
-                if (this.isImageFile(newFile)) {
-                    this.generateImagePreview(newFile)
-                } else if (this.isDocumentFile(newFile)) {
-                    this.generateDocumentPreview(newFile)
-                }
-
-                console.log('handleExceed 后的文件列表:', this.files)
-                // 自动上传新文件
-                if (this.autoUpload && !this.isUploading) {
-                    this.$nextTick(() => {
-                        this.$refs.upload.submit();
-                    });
-                }
-            }
-        },
-
-        handleRemove(file, fileList) {
-            if (file == null) {
-                this.clearPreview();
-                return true;
-            }
-            // 如果正在上传中，阻止移除
-            if (this.isUploading && file.status === 'uploading') {
-                this.$message.warning('文件正在上传中，请稍后再删除');
-                return false; // 阻止删除操作
-            }
-            // 根据剩余文件重新生成预览
-            if (fileList.length === 0) {
-                this.clearPreview();
-            } else if (fileList.length === 1 && fileList[0] && fileList[0].raw) {
-                if (this.isImageFile(fileList[0].raw)) {
-                    this.generateImagePreview(fileList[0].raw);
-                } else if (this.isDocumentFile(fileList[0].raw)) {
-                    this.generateDocumentPreview(fileList[0].raw);
-                }
-            } else {
-                this.clearPreview();
-            }
-            const delFileObj = this.findFileByRawFile(file.raw);
-            delFileObj.response = delFileObj.res;
-            // 更新文件列表
-            this.files = this.formatFileList(fileList);
-            // 触发文件删除事件给父组件
-            this.$emit('del-file', delFileObj);
-            // 传递当前文件信息给父组件
-            this.$emit('file-change', this.getCurrentFiles(), this.type);
-            // 返回 true 允许删除继续，false 阻止删除
-            return true;
-        },
-
-        // 格式化文件列表，确保数据结构正确
         formatFileList(fileList) {
             return fileList.map((file) => {
-                // 创建一个标准的文件对象
                 const formattedFile = {
                     uid: file.uid,
                     name: file.name,
@@ -468,40 +379,25 @@ export default {
                     raw: file.raw,
                 }
 
-                // 确保 percentage 属性存在且有效
                 if (file.percentage !== undefined && file.percentage !== null) {
-                    formattedFile.percentage = Math.max(
+                    formattedFile.percentage = Math.max(0, Math.min(100, file.percentage))
-                        0,
-                        Math.min(100, file.percentage),
-                    )
                 } else if (file.status === 'uploading') {
                     formattedFile.percentage = 0
                 } else if (file.status === 'success') {
                     formattedFile.percentage = 100
                 }
 
-                // 保留其他可能存在的属性
                 if (file.response) {
-                    formattedFile.response = file.response;
+                    formattedFile.response = file.response
-                    formattedFile.res = file.response;
+                    formattedFile.res = file.response
-                }
-
-                if (file.filePath) {
-                    formattedFile.filePath = file.filePath;
-                }
-
-
-                if (file.statusText) {
-                    formattedFile.statusText = file.statusText
                 }
 
                 return formattedFile
             })
         },
 
-        // 获取当前文件列表（确保是普通数组）
         getCurrentFiles() {
-            const currentFiles = this.files.map((file) => {
+            return this.files.map((file) => {
                 const fileObj = {
                     uid: file.uid,
                     name: file.name,
@@ -510,125 +406,22 @@ export default {
                     status: file.status,
                 }
 
-                // 确保 percentage 存在
-                if (file.percentage !== undefined) {
-                    fileObj.percentage = file.percentage
-                }
-
-                // 保留原始文件对象（如果存在）
                 if (file.raw) {
                     fileObj.raw = file.raw
                 }
 
-                // 如果文件已上传成功，添加服务器返回的信息
                 if (file.response) {
                     fileObj.response = file.response
-                    fileObj.response.businessType =
+                    fileObj.response.businessType = this.fileUploadRule?.fileUploadType
-                        this.fileUploadRule?.fileUploadType
                 }
 
                 return fileObj
             })
-
-            return currentFiles
-        },
-
-
-        // 判断是否为图片文件
-        isImageFile(file) {
-            return (
-                (file && file.type && file.type.startsWith('image/')) ||
-                (file && file.fileType === '1')
-            )
-        },
-        // 判断是否为文档文件
-        isDocumentFile(file) {
-            if (!file || !file.name) return false
-            const fileExtension = file.name.split('.').pop().toLowerCase()
-            return (
-                ['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) ||
-                (file && file.fileType === '2')
-            )
-        },
-        // 生成图片预览
-        generateImagePreview(file) {
-            const reader = new FileReader()
-            reader.onload = (e) => {
-                this.previewImageUrl = e.target.result
-                this.previewImageName = file.name
-                // 清除文档预览
-                this.previewFileName = ''
-                this.previewFileType = ''
-            }
-            reader.readAsDataURL(file)
-        },
-        // 修改回显生成图片预览
-        generateImagePreviewFromPath(file) {
-            this.previewImageUrl = file.lsFilePath
-            this.previewImageName = file.name
-            // 清除文档预览
-            this.previewFileName = ''
-            this.previewFileType = ''
-        },
-        // 生成文档预览
-        generateDocumentPreview(file) {
-            const fileExtension = file.name.split('.').pop().toLowerCase()
-            this.previewFileName = file.name
-            this.previewFileType = fileExtension
-            // 清除图片预览
-            this.previewImageUrl = ''
-            this.previewImageName = ''
-        },
-        // 清除预览
-        clearPreview() {
-            this.previewImageUrl = ''
-            this.previewImageName = ''
-            this.previewFileName = ''
-            this.previewFileType = ''
-        },
-        // 获取文件图标类型
-        getFileIconClass() {
-            const iconMap = {
-                pdf: 'el-icon-document',
-                doc: 'el-icon-document',
-                docx: 'el-icon-document',
-                xls: 'el-icon-document',
-                xlsx: 'el-icon-document',
-            }
-            return iconMap[this.previewFileType] || 'el-icon-document'
-        },
-        // 清空所有文件
-        clearFiles() {
-            this.files = []
-            this.clearPreview()
-            this.$emit('file-change', [])
-        },
-        // 专门处理外部传入的文件预览
-        handlePreviewFromExternal(fileList) {
-            if (fileList.length > 0) {
-                const firstFile = fileList[0]
-                if (firstFile && firstFile.lsFilePath) {
-                    if (this.isImageFile(firstFile)) {
-                        this.generateImagePreviewFromPath(firstFile)
-                    } else if (this.isDocumentFile(firstFile)) {
-                        this.generateDocumentPreview(firstFile)
-                    }
-                } else if (firstFile && firstFile.raw) {
-                    if (this.isImageFile(firstFile.raw)) {
-                        this.generateImagePreview(firstFile.raw)
-                    } else if (this.isDocumentFile(firstFile.raw)) {
-                        this.generateDocumentPreview(firstFile.raw)
-                    }
-                } else {
-                    this.clearPreview()
-                }
-            } else {
-                this.clearPreview()
-            }
         },
     },
 }
 </script>
+
 <style scoped lang="scss">
 .upload-container {
     width: 100%;
@@ -641,7 +434,7 @@ export default {
 
             .el-upload-dragger {
                 width: 100%;
-                height: 240px;
+                height: 160px;
                 border: 2px dashed #dcdfe6;
                 border-radius: 8px;
                 background-color: #fafafa;
@@ -649,8 +442,6 @@ export default {
                 align-items: center;
                 justify-content: center;
                 transition: all 0.3s ease;
-                position: relative;
-                overflow: hidden;
 
                 &:hover {
                     border-color: #409eff;
@@ -667,156 +458,22 @@ export default {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: 5px;
+        padding: 20px;
 
-        // 图片预览样式
-        .image-preview {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border-radius: 6px;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .preview-thumbnail {
-                max-width: 100%;
-                max-height: 100%;
-                width: auto;
-                height: auto;
-                object-fit: contain;
-                display: block;
-            }
-
-            .preview-overlay {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.6);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0;
-                transition: opacity 0.3s ease;
-                pointer-events: none;
-
-                .preview-text {
-                    text-align: center;
-                    color: white;
-                    pointer-events: none;
-
-                    .main-text {
-                        font-size: 16px;
-                        margin-bottom: 8px;
-                        font-weight: 500;
-                    }
-
-                    .tip-text {
-                        font-size: 12px;
-                        opacity: 0.9;
-                    }
-                }
-            }
-
-            &:hover .preview-overlay {
-                opacity: 1;
-            }
-        }
-
-        // 文件预览样式
-        .file-preview {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            border-radius: 6px;
-            overflow: hidden;
-
-            .file-icon-container {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                background: #f9fafc;
-
-                .file-icon {
-                    font-size: 64px;
-                    color: #1f72ea;
-                    margin-bottom: 16px;
-                }
-
-                .file-name {
-                    font-size: 14px;
-                    color: #606266;
-                    text-align: center;
-                    padding: 0 20px;
-                    word-break: break-all;
-                    max-width: 100%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: 2;
-                    line-clamp: 2;
-                    -webkit-box-orient: vertical;
-                }
-            }
-
-            .preview-overlay {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(0, 0, 0, 0.6);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0;
-                transition: opacity 0.3s ease;
-                pointer-events: none;
-
-                .preview-text {
-                    text-align: center;
-                    color: white;
-                    pointer-events: none;
-
-                    .main-text {
-                        font-size: 16px;
-                        margin-bottom: 8px;
-                        font-weight: 500;
-                    }
-
-                    .tip-text {
-                        font-size: 12px;
-                        opacity: 0.9;
-                    }
-                }
-            }
-
-            &:hover .preview-overlay {
-                opacity: 1;
-            }
-        }
-
-        // 默认上传区域样式
         .upload-text {
             text-align: center;
 
             .main-text {
-                font-size: 18px;
+                font-size: 16px;
                 color: #1f72ea;
-                margin-bottom: 12px;
+                margin-bottom: 8px;
                 font-weight: 500;
             }
 
             .tip-text {
                 font-size: 14px;
                 color: #909399;
-                line-height: 1.5;
+                line-height: 1.4;
 
                 div {
                     margin-bottom: 2px;
@@ -825,4 +482,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/views/enterpriseLibrary/technical/components/child/FileInfo.vue

@@ -20,13 +20,13 @@
 const defaultParams = {
     fileType: 'technical_solution',
     uploadType: 'pdf、doc、docx',
-    maxFileTips: '1MB',
+    maxFileTips: '500MB',
     fileUploadRule: {
         fileUploadType: 'technical_solution',
         fields_json: '',
         suffix: 'technical_solution_database'
     },
-    limitUploadNum: 10
+    limitUploadNum: 5
 };
 import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
 export default {
@@ -84,7 +84,6 @@ export default {
         // 文件删除时触发
         handleDelFile(file) {
             const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
-            alert(delPath);
             if(delPath){
                 this.form.delFileList.push(delPath);
             }