From b3729efd6fbcc06ee789a75d6718e5faff411e98 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Tue, 28 Oct 2025 17:32:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/common/UploadFile.vue | 612 ++++++++++++++------------------
 1 file changed, 258 insertions(+), 354 deletions(-)

diff --git a/src/views/common/UploadFile.vue b/src/views/common/UploadFile.vue
index 5c26738..bd4cce7 100644
--- a/src/views/common/UploadFile.vue
+++ b/src/views/common/UploadFile.vue
@@ -1,11 +1,24 @@
 <template>
     <div class="upload-container">
-        <el-upload ref="upload" class="upload-demo" drag action="#" multiple :show-file-list="true"
-            :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">
+        <el-upload 
+            ref="upload" 
+            class="upload-demo" 
+            drag 
+            action="#" 
+            multiple 
+            :show-file-list="true"
+            :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">
@@ -16,10 +29,10 @@
                     </div>
                 </div>
 
-                <!-- 当只有一个文档文件时显示文件图标 -->
+                <!-- 文档预览 -->
                 <div v-else-if="showFilePreview" class="file-preview">
                     <div class="file-icon-container">
-                        <i :class="getFileIconClass()" class="file-icon"></i>
+                        <i :class="fileIconClass" class="file-icon"></i>
                         <div class="file-name">{{ previewFileName }}</div>
                     </div>
                     <div class="preview-overlay">
@@ -50,6 +63,30 @@ import {
     uploadSmallFile,
     uploadLargeFile,
 } from '@/api/common/uploadFile.js'
+
+// 常量定义
+const FILE_STATUS = {
+    READY: 'ready',
+    UPLOADING: 'uploading',
+    SUCCESS: 'success',
+    FAIL: 'fail',
+    REMOVED: 'removed'
+}
+
+const FILE_TYPES = {
+    IMAGE: '1',
+    DOCUMENT: '2'
+}
+
+const DEFAULT_FILE_SIZE = 5 * 1024 * 1024 // 5MB
+const ICON_MAP = {
+    pdf: 'el-icon-document',
+    doc: 'el-icon-document',
+    docx: 'el-icon-document',
+    xls: 'el-icon-document',
+    xlsx: 'el-icon-document',
+}
+
 export default {
     name: 'UploadFile',
     props: {
@@ -89,47 +126,29 @@ export default {
             previewImageName: '',
             previewFileName: '',
             previewFileType: '',
-            isUploading: false, // 添加上传状态标识
-            defaultFileSize: 1024 * 1024 * 5, // 默认文件大小5MB 超过5MB算大文件上传
-            skipNextChange: false,
+            isUploading: false,
         }
     },
     computed: {
-        // 是否显示图片预览
         showImagePreview() {
             return this.previewImageUrl && this.files.length === 1
         },
-        // 是否显示文件预览
         showFilePreview() {
-            return (
-                this.previewFileName &&
-                this.previewFileType &&
-                this.files.length === 1
-            )
+            return this.previewFileName && this.previewFileType && this.files.length === 1
         },
         accept() {
-            return this.uploadType
-                .split('、')
-                .map((type) => `.${type}`)
-                .join(',')
+            return this.allowedTypes.map(type => `.${type}`).join(',')
         },
-        // 获取支持的文件类型数组
         allowedTypes() {
             return this.uploadType.split('、')
         },
-        // 获取文件大小限制（转换为MB数字）
         maxSizeMB() {
             const sizeStr = this.maxFileTips.toLowerCase()
-            if (sizeStr.includes('mb')) {
-                return parseFloat(sizeStr)
-            } else if (sizeStr.includes('kb')) {
-                return parseFloat(sizeStr) / 1024
-            } else if (sizeStr.includes('gb')) {
-                return parseFloat(sizeStr) * 1024
-            }
+            if (sizeStr.includes('mb')) return parseFloat(sizeStr)
+            if (sizeStr.includes('kb')) return parseFloat(sizeStr) / 1024
+            if (sizeStr.includes('gb')) return parseFloat(sizeStr) * 1024
             return 20
         },
-        // 获取MIME类型映射
         mimeTypes() {
             const typeMap = {
                 png: 'image/png',
@@ -141,21 +160,18 @@ export default {
                 xls: 'application/vnd.ms-excel',
                 xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
             }
-            return this.allowedTypes.map((type) => typeMap[type] || '')
+            return this.allowedTypes.map(type => typeMap[type] || '')
         },
+        fileIconClass() {
+            return ICON_MAP[this.previewFileType] || 'el-icon-document'
+        }
     },
     watch: {
         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)
                     })
                 }
@@ -165,21 +181,16 @@ export default {
         },
     },
     methods: {
+        // 文件验证
         beforeUpload(file) {
-            // 如果正在上传中，阻止新的上传
             if (this.isUploading) {
                 this.$message.warning('当前有文件正在上传，请稍后再试')
                 return false
             }
 
-            // 验证文件类型
-            const fileExtension = file.name.split('.').pop().toLowerCase()
+            const fileExtension = this.getFileExtension(file.name)
             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) {
@@ -194,271 +205,180 @@ export default {
 
             return true
         },
-        // 文件状态改变
+
+        // 文件变化处理
         handleFileChange(file, fileList) {
-            // 如果文件状态是移除或失败或者成功，不处理
-            if (file.status === 'removed' || file.status === 'fail' || file.status === 'success') {
-                console.log('现在的文件：', this.files);
-                return
-            }
-            // 更新文件列表
+            if (this.shouldIgnoreFileChange(file.status)) return
+            
             this.files = this.formatFileList(fileList)
-            // 生成预览
-            if (file.raw && fileList.length === 1) {
-                if (this.isImageFile(file.raw)) {
-                    // 图片预览
-                    this.generateImagePreview(file.raw)
-                } else if (this.isDocumentFile(file.raw)) {
-                    // 文档预览
-                    this.generateDocumentPreview(file.raw)
+            this.updatePreview(fileList)
+        },
+
+        // 文件超出限制处理
+        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]
+                const newFileObj = this.createFileObject(newFile)
+                this.files = [newFileObj]
+
+                this.updatePreview([newFileObj])
+
+                // 自动上传
+                if (this.autoUpload && !this.isUploading) {
+                    this.$nextTick(() => {
+                        this.$refs.upload.submit()
+                    })
                 }
-            } else {
-                // 如果不是单个文件，清除预览
-                this.clearPreview()
             }
         },
 
-        // 添加上传成功的处理
+        // 文件移除处理
+        handleRemove(file, fileList) {
+            if (!file) {
+                this.clearPreview()
+                return true
+            }
+
+            if (this.isUploading && file.status === FILE_STATUS.UPLOADING) {
+                this.$message.warning('文件正在上传中，请稍后再删除')
+                return false
+            }
+
+            this.updatePreview(fileList)
+            this.files = this.formatFileList(fileList)
+            
+            const delFileObj = this.findFileByRawFile(file.raw)
+            if (delFileObj) {
+                delFileObj.response = delFileObj.res
+                this.$emit('del-file', delFileObj)
+            }
+
+            this.$emit('file-change', this.getCurrentFiles(), this.type)
+            return true
+        },
+
+        // 自定义上传
+        async customUpload(options) {
+            const { file } = options
+            this.isUploading = true
+            
+            const uploadFileObj = this.findFileByRawFile(file)
+            if (!uploadFileObj) {
+                this.handleError(new Error('文件对象不存在'), file)
+                return
+            }
+
+            const fileUid = uploadFileObj.uid
+            const statusText = this.fileUploadRule.fields_json ? '识别中' : '上传中'
+            
+            this.updateFileStatus(fileUid, FILE_STATUS.UPLOADING, statusText, null, 0)
+            this.$bus.$emit('startUpload', statusText)
+
+            try {
+                const formData = this.createFormData(file)
+                const res = await this.uploadFile(formData, file.size)
+                
+                if (res.code === 200) {
+                    this.handleSuccess(res, uploadFileObj)
+                } else {
+                    this.handleError(new Error(res.message || '上传失败'), uploadFileObj)
+                }
+            } catch (err) {
+                this.handleError(err, uploadFileObj)
+            } finally {
+                this.isUploading = false
+            }
+        },
+
+        // 上传成功处理
         handleSuccess(response, file) {
             this.$bus.$emit('endUpload')
-            // 更新文件状态为成功
-            this.updateFileStatus(file.uid, 'success', '', response.data, 100)
-            // 触发文件变化事件
+            this.updateFileStatus(file.uid, FILE_STATUS.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));
+        // 工具方法
+        getFileExtension(filename) {
+            return filename.split('.').pop().toLowerCase()
+        },
 
-            // 从 el-upload 的文件列表中查找对应的完整文件对象
-            const uploadFileObj = this.findFileByRawFile(file);
-            if (!uploadFileObj) {
-                console.error('未找到对应的文件对象');
-                this.handleError(new Error('文件对象不存在'), file);
-                return;
-            }
+        shouldIgnoreFileChange(status) {
+            return [FILE_STATUS.REMOVED, FILE_STATUS.FAIL, FILE_STATUS.SUCCESS].includes(status)
+        },
 
-            const fileUid = uploadFileObj.uid;
+        createFormData(file) {
+            const formData = new FormData()
+            formData.append('file', file)
+            formData.append('params', JSON.stringify(this.fileUploadRule))
+            return formData
+        },
 
-            // 更新文件状态为上传中，并设置初始进度为 0
-            this.updateFileStatus(
-                fileUid,
-                'uploading',
-                this.fileUploadRule.fields_json ? '识别中' : '上传中',
-                null,
-                0,
-            );
-
-            try {
-                this.$bus.$emit(
-                    'startUpload',
-                    this.fileUploadRule.fields_json ? '识别中' : '上传中',
-                );
-
-                let res = null;
-                if (this.defaultFileSize < file.size) {
-                    if (this.fileUploadRule.fields_json) {
-                        res = await uploadLargeFileByOcr(formData);
-                    } else {
-                        res = await uploadLargeFile(formData);
-                    }
-                } else {
-                    if (this.fileUploadRule.fields_json) {
-                        res = await uploadSmallFileByOcr(formData);
-                    } else {
-                        res = await uploadSmallFile(formData);
-                    }
-                }
-                if (res.code === 200) {
-                    this.handleSuccess(res, uploadFileObj);
-                } else {
-                    this.handleError(new Error(res.message || '上传失败'), uploadFileObj);
-                }
-            } catch (err) {
-                this.handleError(err, uploadFileObj);
-            } finally {
-                // 无论成功失败，都重置上传状态
-                this.isUploading = false;
+        async uploadFile(formData, fileSize) {
+            const isLargeFile = fileSize > DEFAULT_FILE_SIZE
+            const hasOcr = !!this.fileUploadRule.fields_json
+            
+            if (isLargeFile) {
+                return hasOcr ? await uploadLargeFileByOcr(formData) : await uploadLargeFile(formData)
+            } else {
+                return hasOcr ? await uploadSmallFileByOcr(formData) : await uploadSmallFile(formData)
             }
         },
 
-        // 通过原始文件对象查找对应的上传文件对象
         findFileByRawFile(rawFile) {
-            return this.files.find(item =>
-                item.raw === 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,
             )
+        },
+
+        removeFailedFile(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,
-        ) {
-            const fileIndex = this.files.findIndex(
-                (item) => item.uid === fileUid,
-            )
-            if (fileIndex !== -1) {
-                const updatedFile = {
-                    ...this.files[fileIndex],
-                    status: status,
-                }
-
-                if (statusText) {
-                    updatedFile.statusText = statusText
-                }
-
-                // 确保 percentage 是有效的数字（0-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.businessType =
-                        this.fileUploadRule?.fileUploadType;
-                    updatedFile.res = updatedFile.response;
-                }
-
-                // 使用 Vue.set 确保响应式更新
-                this.$set(this.files, fileIndex, updatedFile)
-                console.log('更新后的文件列表:', this.files)
-            } else {
+        updateFileStatus(fileUid, status, statusText = null, responseData = null, percentage = null) {
+            const fileIndex = this.files.findIndex(item => item.uid === fileUid)
+            if (fileIndex === -1) {
                 console.warn('未找到要更新的文件:', fileUid)
+                return
             }
+
+            const updatedFile = { ...this.files[fileIndex], status }
+            
+            if (statusText) updatedFile.statusText = statusText
+            if (percentage !== null) updatedFile.percentage = Math.max(0, Math.min(100, percentage))
+            
+            if (responseData) {
+                updatedFile.response = responseData
+                updatedFile.response.businessType = this.fileUploadRule?.fileUploadType
+                updatedFile.res = updatedFile.response
+            }
+
+            this.$set(this.files, fileIndex, updatedFile)
         },
 
-        // 处理文件超出限制
-        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) => {
-                // 创建一个标准的文件对象
+            return fileList.map(file => {
                 const formattedFile = {
                     uid: file.uid,
                     name: file.name,
@@ -468,157 +388,135 @@ export default {
                     raw: file.raw,
                 }
 
-                // 确保 percentage 属性存在且有效
+                // 处理进度
                 if (file.percentage !== undefined && file.percentage !== null) {
-                    formattedFile.percentage = Math.max(
-                        0,
-                        Math.min(100, file.percentage),
-                    )
-                } else if (file.status === 'uploading') {
+                    formattedFile.percentage = Math.max(0, Math.min(100, file.percentage))
+                } else if (file.status === FILE_STATUS.UPLOADING) {
                     formattedFile.percentage = 0
-                } else if (file.status === 'success') {
+                } else if (file.status === FILE_STATUS.SUCCESS) {
                     formattedFile.percentage = 100
                 }
 
-                // 保留其他可能存在的属性
+                // 保留其他属性
                 if (file.response) {
-                    formattedFile.response = file.response;
-                    formattedFile.res = file.response;
-                }
-
-                if (file.filePath) {
-                    formattedFile.filePath = file.filePath;
-                }
-
-
-                if (file.statusText) {
-                    formattedFile.statusText = file.statusText
+                    formattedFile.response = 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,
                     size: file.size,
                     type: file.type,
                     status: file.status,
+                    percentage: file.percentage || 0,
                 }
 
-                // 确保 percentage 存在
-                if (file.percentage !== undefined) {
-                    fileObj.percentage = file.percentage
-                }
-
-                // 保留原始文件对象（如果存在）
-                if (file.raw) {
-                    fileObj.raw = file.raw
-                }
-
-                // 如果文件已上传成功，添加服务器返回的信息
+                if (file.raw) fileObj.raw = file.raw
                 if (file.response) {
                     fileObj.response = file.response
-                    fileObj.response.businessType =
-                        this.fileUploadRule?.fileUploadType
+                    fileObj.response.businessType = this.fileUploadRule?.fileUploadType
                 }
 
                 return fileObj
             })
-
-            return currentFiles
         },
 
+        createFileObject(file) {
+            return {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                raw: file,
+                uid: Date.now(),
+                status: FILE_STATUS.READY,
+                percentage: 0,
+            }
+        },
 
-        // 判断是否为图片文件
+        // 预览相关方法
         isImageFile(file) {
-            return (
-                (file && file.type && file.type.startsWith('image/')) ||
-                (file && file.fileType === '1')
-            )
+            return (file && file.type && file.type.startsWith('image/')) || (file && file.fileType === FILE_TYPES.IMAGE)
         },
-        // 判断是否为文档文件
+
         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')
-            )
+            const fileExtension = this.getFileExtension(file.name)
+            return ['pdf', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtension) || 
+                   (file && file.fileType === FILE_TYPES.DOCUMENT)
         },
-        // 生成图片预览
+
+        updatePreview(fileList) {
+            if (fileList.length === 0) {
+                this.clearPreview()
+                return
+            }
+
+            if (fileList.length === 1 && fileList[0]) {
+                const file = fileList[0].raw || fileList[0]
+                if (this.isImageFile(file)) {
+                    fileList[0].lsFilePath ? 
+                        this.generateImagePreviewFromPath(fileList[0]) : 
+                        this.generateImagePreview(file)
+                } else if (this.isDocumentFile(file)) {
+                    this.generateDocumentPreview(file)
+                }
+            } else {
+                this.clearPreview()
+            }
+        },
+
         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.previewFileType = this.getFileExtension(file.name)
             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)) {
+                if (firstFile?.lsFilePath) {
+                    this.isImageFile(firstFile) ? 
+                        this.generateImagePreviewFromPath(firstFile) : 
                         this.generateDocumentPreview(firstFile)
-                    }
-                } else if (firstFile && firstFile.raw) {
-                    if (this.isImageFile(firstFile.raw)) {
-                        this.generateImagePreview(firstFile.raw)
-                    } else if (this.isDocumentFile(firstFile.raw)) {
+                } else if (firstFile?.raw) {
+                    this.isImageFile(firstFile.raw) ? 
+                        this.generateImagePreview(firstFile.raw) : 
                         this.generateDocumentPreview(firstFile.raw)
-                    }
                 } else {
                     this.clearPreview()
                 }
@@ -626,6 +524,12 @@ export default {
                 this.clearPreview()
             }
         },
+
+        clearFiles() {
+            this.files = []
+            this.clearPreview()
+            this.$emit('file-change', [])
+        },
     },
 }
 </script>