@idooel/components 0.0.2-beta.4 → 0.0.2-beta.6

package/packages/upload/src/index.vue

@@ -14,6 +14,7 @@
       :multiple="multiple"
       :headers="headers"
       :maximum="getMaximum"
+      :data="uploadParams"
       @input-file="onWatchInputFiles"
       @input="onWatchFiles"
       style="width: 100%;">
@@ -35,17 +36,34 @@
       </section>
     </FileUpload>
     <section class="ele-files__wrapper">
-      <div class="ele-file__item" v-for="(file, idx) in buildedFiles" :key="idx">
+      <!-- 显示正在上传的文件（有进度条） -->
+      <div class="ele-file__item" v-for="(file, idx) in uploadingFiles" :key="`uploading-${idx}`">
         <div class="ele-file__suffix--icon">
           <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
         </div>
         <div class="ele-file__name">
-          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
-          <div v-if="(!file.success && file.progress)" class="ele-uplpad__progress">
+          <div class="ele-file__inner">{{ file.name }}</div>
+          <div v-if="file.progress !== undefined" class="ele-uplpad__progress">
             <a-progress :strokeWidth="2" :percent="Number(file.progress)" size="small" />
           </div>
         </div>
-        <div class="ele-file__delete" v-if="file.success || file.error || !file.response">
+        <div class="ele-file__delete" v-if="file.success || file.error">
+          <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
+          <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
+            <ele-icon type="delete"></ele-icon>
+          </span>
+        </div>
+      </div>
+      
+      <!-- 显示已上传完成的文件 -->
+      <div class="ele-file__item" v-for="(file, idx) in completedFiles" :key="`completed-${idx}`">
+        <div class="ele-file__suffix--icon">
+          <ele-icon :type="fileSuffixIcon[file.suffix] ? fileSuffixIcon[file.suffix].name : 'icon-file'"></ele-icon>
+        </div>
+        <div class="ele-file__name">
+          <div class="ele-file__inner" @click="handleClickDownload(file)">{{ file.name }}</div>
+        </div>
+        <div class="ele-file__delete">
           <span class="ele-file__size">{{ (file.size / byteConversion).toFixed(2) }}M</span>
           <span class="ele-file__delete--icon" @click="handleClickDelete(file)">
             <ele-icon type="delete"></ele-icon>
@@ -60,7 +78,39 @@
 import FileUpload from 'vue-upload-component'
 import { v4 as uuidv4 } from 'uuid'
 import { route, net, type } from '@idooel/shared'
-// import { message } from 'ant-design-vue'
+
+// 常量定义
+const CONSTANTS = {
+  DEFAULT_URL: 'zuul/api-file/workbench/file',
+  DEFAULT_ICON: '上传',
+  DEFAULT_SIZE: 100,
+  DEFAULT_MESSAGE: '单击或拖动文件到该区域以上传',
+  DEFAULT_MAXIMUM: 20,
+  BYTE_CONVERSION: 1024 * 1024,
+  CHUNK_MIN_SIZE: 3 * 1024 * 1024,
+  CHUNK_MAX_ACTIVE: 3,
+  CHUNK_MAX_RETRIES: 5,
+  SAVE_INTERVAL: 2000
+}
+
+// 文件后缀图标映射
+const FILE_SUFFIX_ICONS = {
+  'doc': { name: 'icon-doc' },
+  'html': { name: 'icon-html' },
+  'mp4': { name: 'icon-mp' },
+  'pdf': { name: 'icon-pdf' },
+  'ppt': { name: 'icon-ppt' },
+  'psd': { name: 'icon-psd' },
+  'rtf': { name: 'icon-rtf' },
+  'txt': { name: 'icon-txt' },
+  'vis': { name: 'icon-vis' },
+  'xls': { name: 'icon-xls' },
+  'xml': { name: 'icon-xml' },
+  'zip': { name: 'icon-zip' },
+  'jpg': { name: 'icon-img' },
+  'mp3': { name: 'icon-mp1' }
+}
+
 export default {
   name: 'ele-upload',
   components: {
@@ -73,20 +123,19 @@ export default {
   props: {
     url: {
       type: String,
-      //TODO
-      default: `zuul/api-file/workbench/file`
+      default: CONSTANTS.DEFAULT_URL
     },
     icon: {
       type: String,
-      default: '上传'
+      default: CONSTANTS.DEFAULT_ICON
     },
     size: {
       type: Number,
-      default: 100
+      default: CONSTANTS.DEFAULT_SIZE
     },
     message: {
       type: String,
-      default: '单击或拖动文件到该区域以上传'
+      default: CONSTANTS.DEFAULT_MESSAGE
     },
     ext: {
       type: String
@@ -99,7 +148,7 @@ export default {
     },
     maximum: {
       type: Number,
-      default: 10
+      default: CONSTANTS.DEFAULT_MAXIMUM
     },
     multiple: {
       type: Boolean,
@@ -127,7 +176,7 @@ export default {
     },
     byteConversion: {
       type: Number,
-      default: 1024 * 1024
+      default: CONSTANTS.BYTE_CONVERSION
     },
     chunkEnabled: {
       type: Boolean,
@@ -136,211 +185,365 @@ export default {
   },
   data() {
     return {
-      files: [],
-      buildedFiles: [],
+      // 文件状态管理
+      files: [],              // vue-upload-component 管理的文件
+      buildedFiles: [],       // 已构建完成的文件列表
+      
+      // 上传状态管理
       saveToServerAsyncPageTimer: null,
-      uploadRefId: null
+      uploadRefId: null,
+      // 多选且外部无值时，预先生成 groupId，确保首次上传参数完整
+      groupId: (this.multiple && !this.value) ? uuidv4() : null
+    }
+  },
+  created() {
+    // 多文件模式下，如果没有外部 groupId，则生成一个
+    if (this.multiple && !this.value) {
+      this.groupId = uuidv4()
+      console.log('Created with new groupId:', this.groupId)
     }
   },
   watch: {
     value: {
-      async handler (value) {
-        if (type.isArray(value)) {
-          // multiple
-        } else if (type.isEmpty(value)) {
-          this.files = []
-          this.buildedFiles = []
+      async handler(value) {
+        if (type.isEmpty(value)) {
+          this.resetFiles()
+        } else if (this.multiple) {
+          this.handleMultipleFileValue(value)
         } else {
-          // single
-          this.fetchFileWithFileId()
+          this.handleSingleFileValue()
         }
       },
       immediate: true
     }
   },
   computed: {
-    prefixPath () {
+    // ==================== 基础配置 ====================
+    prefixPath() {
       return window.prefixPath
     },
-    iconIsZhWrod () {
+    
+    uploadRef() {
+      if (!this.uploadRefId) {
+        this.uploadRefId = `uploadRef_${uuidv4()}`
+      }
+      return this.uploadRefId
+    },
+    
+    iconIsZhWord() {
       return type.isZhWord(this.icon)
     },
-    getPayloads () {
-      return {
-        override: false
-      }
+    
+    // ==================== 上传配置 ====================
+    uploadParams() {
+      return this.multiple ? { groupID: this.groupId } : {}
     },
-    chunkConfig () {
-      return {
-        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
-        headers: {
-          ...this.headers
-        },
-        minSize: 3 * this.byteConversion,
-        maxActive: 3,
-        maxRetries: 5,
-        startBody: {
-          override: true,
-          path: '/cw'
-        },
-        uploadBody: {
-          override: true,
-          path: '/cw'
-        },
-        finishBody: {
-          override: true,
-          path: '/cw'
-        }
-      }
+    
+    fileSizeLimit() {
+      return this.size * this.byteConversion
     },
-    isFileUploadSuccessed () {
-      return this.files.every(file => file.success)
+    
+    postAction() {
+      const queryString = route.toQueryString(this.querys)
+      return `${this.prefixPath}${this.url}?${queryString}`
     },
-    isShowUploadContainer () {
-      if (this.multiple) {
-        if (this.isFileUploadSuccessed && this.buildedFiles.length >= this.maximum) {
-          return false
-        } else {
-          return true
-        }
-      } else {
-        const [file = {}] = this.buildedFiles
-        if (this.buildedFiles.length < 1) {
-          return true
-        }
-        if ((this.isFileUploadSuccessed && this.buildedFiles.length >= 1) || !file.response) {
-          return false
-        } else {
-          return true
-        }
+    
+    chunkConfig() {
+      return {
+        action: `${this.prefixPath}zuul/api-file/workbench/file/temp/chunk/vue`,
+        headers: { ...this.headers },
+        minSize: CONSTANTS.CHUNK_MIN_SIZE,
+        maxActive: CONSTANTS.CHUNK_MAX_ACTIVE,
+        maxRetries: CONSTANTS.CHUNK_MAX_RETRIES,
+        startBody: { override: true, path: '/cw' },
+        uploadBody: { override: true, path: '/cw' },
+        finishBody: { override: true, path: '/cw' }
       }
     },
-    getMaximum () {
+    
+    getMaximum() {
       return this.multiple ? this.maximum : 1
     },
-    fileSizeLimit () {
-      return this.size * this.byteConversion
+    
+    // ==================== 文件状态 ====================
+    uploadingFiles() {
+      return this.files.filter(file => file.progress !== undefined && !file.success)
     },
-    postAction () {
-      const ret = route.toQueryString(this.querys)
-      return `${this.prefixPath}${this.url}?${ret}`
+    
+    completedFiles() {
+      return this.buildedFiles.filter(file => file.fileID)
     },
-    uploadRef () {
-      if (!this.uploadRefId) {
-        this.uploadRefId = `uploadRef_${uuidv4()}`
+    
+    totalFiles() {
+      return this.uploadingFiles.length + this.completedFiles.length
+    },
+    
+    isFileUploadSuccessed() {
+      const currentUploadingFiles = this.files.filter(file => file.response !== undefined)
+      if (currentUploadingFiles.length === 0) {
+        return this.buildedFiles.length > 0
       }
-      return this.uploadRefId
+      return currentUploadingFiles.every(file => file.success)
     },
-    fileSuffixIcon () {
-      return {
-        'doc': { name: 'icon-doc' },
-        'html': { name: 'icon-html' },
-        'mp4': { name: 'icon-mp' },
-        'pdf': { name: 'icon-pdf' },
-        'ppt': { name: 'icon-ppt' },
-        'psd': { name: 'icon-psd' },
-        'rtf': { name: 'icon-rtf' },
-        'txt': { name: 'icon-txt' },
-        'vis': { name: 'icon-vis' },
-        'xls': { name: 'icon-xls' },
-        'xml': { name: 'icon-xml' },
-        'zip': { name: 'icon-zip' },
-        'jpg': { name: 'icon-img' },
-        'mp3': { name: 'icon-mp1' },
-      }
-    },
-    fileIds () {
-      const fileIds = this.buildedFiles.map(file => {
-        return file.fileID
-      })
-      return this.multiple ? fileIds : fileIds[0]
+    
+    isShowUploadContainer() {
+      const maxFiles = this.multiple ? this.maximum : 1
+      return this.totalFiles < maxFiles
+    },
+    
+    // ==================== 文件信息 ====================
+    fileSuffixIcon() {
+      return FILE_SUFFIX_ICONS
     },
-    fileResponseData () {
+    
+    fileIds() {
+      if (this.multiple) {
+        return this.groupId
+      } else {
+        const fileIds = this.buildedFiles.map(file => file.fileID)
+        return fileIds[0]
+      }
+    },
+    
+    fileResponseData() {
       return this.multiple ? this.buildedFiles : this.buildedFiles[0]
     }
   },
   methods: {
-    async fetchFileWithFileId () {
+    // ==================== 文件管理 ====================
+    
+    /**
+     * 从多个数组中移除文件
+     */
+    removeFromArrays(file, arrays, key = 'fileID') {
+      return arrays.map(arr => 
+        arr.filter(item => item[key] !== file[key] && item.id !== file.id)
+      )
+    },
+    
+    /**
+     * 检查文件是否为新文件
+     */
+    isNewFile(newFile, existingFiles, key = 'fileID') {
+      return newFile[key] && !existingFiles.some(existing => existing[key] === newFile[key])
+    },
+    
+    /**
+     * 合并文件数据
+     */
+    mergeFileData(uploadFile) {
+      return {
+        ...uploadFile.response.data,
+        ...uploadFile
+      }
+    },
+    
+    /**
+     * 初始化文件列表
+     */
+    async initializeFiles() {
       if (!this.value) return
-      await net.get(
-        `/api-file/file/${this.value}`
-      ).then(resp => {
-        const { data } = resp
+      
+      if (this.multiple) {
+        await this.fetchFilesWithGroupId()
+      } else {
+        await this.fetchFileWithFileId()
+      }
+    },
+    
+    /**
+     * 获取多文件组
+     */
+    async fetchFilesWithGroupId() {
+      try {
+        const response = await net.get(`/api-file/workbench/file/group/${this.value}`)
+        const data = response.data || []
+        
+        // 只有在没有现有文件时才设置初始文件列表
+        if (this.buildedFiles.length === 0) {
+          this.buildedFiles = data
+          console.log('Initial files loaded:', this.buildedFiles.length)
+        } else {
+          console.log('Keep existing files, skip initial load')
+        }
+      } catch (error) {
+        console.log('fetchFilesWithGroupId error:', error)
+        console.log('Keep current files, do not clear due to API error')
+      }
+    },
+    
+    /**
+     * 获取单文件
+     */
+    async fetchFileWithFileId() {
+      try {
+        const response = await net.get(`/api-file/file/${this.value}`)
+        const data = response.data
         this.buildedFiles = [data]
         this.files = [data]
-      })
-    },
-    handleClickDownload (file) {
-      const { fileID: fileId } = file
-      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
+      } catch (error) {
+        console.log('fetchFileWithFileId error:', error)
+      }
     },
-    handleClickDelete (file) {
-      this.$refs[this.uploadRef].remove(file)
+    
+    /**
+     * 处理文件删除
+     */
+    handleClickDelete(file) {
       const { fileID } = file
-      this.files = this.files.filter(file => file.fileID !== fileID)
-      this.buildedFiles = this.buildedFiles.filter(file => file.fileID !== fileID)
+      console.log('Deleting file:', { name: file.name, fileID })
+      
+      // 从上传组件中移除文件
+      if (this.$refs[this.uploadRef]) {
+        this.$refs[this.uploadRef].remove(file)
+      }
+      
+      // 从所有数组中移除文件
+      [this.files, this.buildedFiles] = this.removeFromArrays(file, [this.files, this.buildedFiles])
+      
+      console.log('After deletion - files:', this.files.length, 'buildedFiles:', this.buildedFiles.length)
+      
+      // 多文件模式下，如果删除最后一个文件，重置 groupId
+      if (this.multiple && this.buildedFiles.length === 0) {
+        this.groupId = null
+        console.log('Reset groupId after deleting last file')
+      }
+      
+      // 触发 change 事件
       this.$emit('change', this.fileIds)
     },
-    onWatchFiles (files) {
+    
+    /**
+     * 处理文件下载
+     */
+    handleClickDownload(file) {
+      const { fileID: fileId } = file
+      window.open(`/api-file/workbench/file/stream/${fileId}?origin=true`)
+    },
+    // ==================== 上传处理 ====================
+    
+    /**
+     * 处理文件上传状态变化
+     */
+    onWatchFiles(files) {
+      console.log('onWatchFiles called with files:', files.length)
+      console.log('Current buildedFiles:', this.buildedFiles.length)
+      
+      // 更新文件状态
       this.files = files
-      this.buildedFiles = this.files.map(file => {
-        return {
-          ...file.response.data,
-          ...file
-        }
-      })
+      
+      // 处理已上传成功的文件
+      this.processUploadedFiles(files)
+      
+      // 检查上传是否完成
       if (this.isFileUploadSuccessed) {
         this.$emit('change', this.fileIds)
         this.$emit('on-success', this.fileResponseData)
       }
     },
-    async saveToServerAsyncPage (payloads = {}) {
-      net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-        }
-      }).then(resp =>{
-        const { data } = resp
+    
+    /**
+     * 处理已上传成功的文件
+     */
+    processUploadedFiles(files) {
+      // 处理所有有响应的文件（包括正在上传和已完成的）
+      const uploadedFiles = files.filter(file => file.response)
+      const newBuildedFiles = uploadedFiles.map(file => this.mergeFileData(file))
+      
+      if (this.multiple) {
+        this.processMultipleFiles(newBuildedFiles)
+      } else {
+        // 单文件模式：只保留最新的文件
+        this.buildedFiles = newBuildedFiles
+      }
+      
+      this.logFileStatus()
+    },
+    
+    /**
+     * 处理多文件模式
+     */
+    processMultipleFiles(newBuildedFiles) {
+      // 获取已存在的文件ID集合
+      const existingFileIds = new Set(this.buildedFiles.map(f => f.fileID).filter(id => id))
+      
+      // 过滤出真正的新文件
+      const trulyNewFiles = newBuildedFiles.filter(newFile => 
+        this.isNewFile(newFile, this.buildedFiles)
+      )
+      
+      console.log('Existing fileIDs:', Array.from(existingFileIds))
+      console.log('New uploaded files:', newBuildedFiles.map(f => ({ name: f.name, fileID: f.fileID })))
+      console.log('Truly new files:', trulyNewFiles.map(f => ({ name: f.name, fileID: f.fileID })))
+      
+      // 将新文件追加到现有文件列表
+      if (trulyNewFiles.length > 0) {
+        this.buildedFiles = [...this.buildedFiles, ...trulyNewFiles]
+        console.log('Added new files, total buildedFiles:', this.buildedFiles.length)
+      }
+      
+      // 更新现有文件的状态（包括新添加的文件）
+      this.updateExistingFiles(newBuildedFiles)
+    },
+    
+    /**
+     * 更新现有文件状态
+     */
+    updateExistingFiles(newBuildedFiles) {
+      this.buildedFiles = this.buildedFiles.map(existingFile => {
+        const updatedFile = newBuildedFiles.find(newFile => newFile.fileID === existingFile.fileID)
+        return updatedFile ? { ...existingFile, ...updatedFile } : existingFile
+      })
+    },
+    
+    /**
+     * 记录文件状态日志
+     */
+    logFileStatus() {
+      console.log('Final buildedFiles:', this.buildedFiles.length)
+      console.log('buildedFiles details:', this.buildedFiles.map(f => ({ name: f.name, fileID: f.fileID, success: f.success })))
+      console.log('Uploading files:', this.uploadingFiles.length)
+      console.log('Completed files:', this.completedFiles.length)
+    },
+    // ==================== 异步处理 ====================
+    
+    /**
+     * 异步保存文件到服务器
+     */
+    async saveToServerAsyncPage(payloads = {}) {
+      try {
+        const response = await net.post('zuul/api-file/workbench/file/temp/saveToServerAsyncPage', payloads, { 
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          }
+        })
+        
+        const { data } = response
         if (data !== 'saveToServerAsyncPage') {
           clearInterval(this.saveToServerAsyncPageTimer)
         }
-      })
-      // const ret = await net.post({
-      //   url: 'zuul/api-file/workbench/file/temp/saveToServerAsyncPage',
-      //   method: 'POST',
-      //   data: { ...payloads }
-      // }).then(resp => {
-      //   const { data: { data, code, message } } = resp
-      //   if (code !== '2000') {
-      //     this.$Message.error(message)
-      //     return
-      //   }
-      //   if (data !== 'saveToServerAsyncPage') {
-      //     clearInterval(timer)
-      //     const { fileID, size } = data
-      //     this.$emit('on-success', { ...data, fileId: fileID })
-      //     this.$Message.success('同步成功')
-      //     return { fileId: fileID, size }
-      //   }
-      // })
-      // return ret
-    },
-    // 验证文件类型
+      } catch (error) {
+        console.error('saveToServerAsyncPage error:', error)
+        clearInterval(this.saveToServerAsyncPageTimer)
+      }
+    },
+    
+    // ==================== 文件验证 ====================
+    
+    /**
+     * 验证文件类型
+     */
     validateFileType(file) {
       if (!file || !file.name) {
         console.log('文件或文件名不存在')
         return false
       }
       
-      const fileName = file.name.toLowerCase()
-      const fileExt = fileName.substring(fileName.lastIndexOf('.'))
+      const fileExt = this.getFileExtension(file.name)
       console.log('文件扩展名:', fileExt)
       
-      // 只检查 extensions，accept 由 vue-upload-component 处理
       if (this.extensions) {
-        const allowedExts = this.extensions.toLowerCase()
-          .split(',')
-          .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)
+        const allowedExts = this.getAllowedExtensions()
         console.log('允许的扩展名:', allowedExts)
         
         if (!allowedExts.includes(fileExt)) {
@@ -353,58 +556,181 @@ export default {
       console.log('文件类型验证通过')
       return true
     },
-    onWatchInputFiles (newFile, oldFile) {
+    
+    /**
+     * 获取文件扩展名
+     */
+    getFileExtension(fileName) {
+      return fileName.toLowerCase().substring(fileName.lastIndexOf('.'))
+    },
+    
+    /**
+     * 获取允许的扩展名列表
+     */
+    getAllowedExtensions() {
+      return this.extensions.toLowerCase()
+        .split(',')
+        .map(ext => ext.trim().startsWith('.') ? ext.trim() : `.${ext.trim()}`)
+    },
+    // ==================== 事件处理 ====================
+    
+    /**
+     * 处理文件输入事件
+     */
+    onWatchInputFiles(newFile, oldFile) {
       if (newFile && !oldFile) {
-        // add file
-        console.log('add file:', newFile)
-        console.log('extensions:', this.extensions)
-        console.log('accept:', this.accept)
-        
-        // 验证文件类型
-        if (!this.validateFileType(newFile)) {
-          // 如果验证失败，移除文件
-          console.log('文件类型验证失败，尝试移除文件')
-          console.log('uploadRef:', this.uploadRef)
-          console.log('$refs:', this.$refs)
-          if (this.$refs[this.uploadRef]) {
-            this.$refs[this.uploadRef].remove(newFile)
-          } else {
-            console.error('无法找到 uploadRef 引用')
-          }
-          return
-        }
-        console.log('文件类型验证通过，继续上传')
-        // 不要在这里 return，让文件继续走原有的上传逻辑
-      }
-      if (newFile && oldFile) {
-        // update file
-        console.log('update', newFile)
-        const { success, active, chunk, response } = newFile
-        if (chunk && success && !active) {
-          console.log('chunk end')
-          const { data: { file, type } } = response
-          const payloads = {
-            filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
-            asyncID: uuidv4(),
-            isDeleteOrigin: false,
-            toImage: type === 'pdf' ? true : false,
-            unzip: type === 'zip' ? true : false,
-            _csrf: localStorage.getItem('token')
-          }
-          this.saveToServerAsyncPageTimer = setInterval(() => {
-            this.saveToServerAsyncPage(payloads)
-          }, 2000)
-        }
+        this.handleFileAdd(newFile)
+      } else if (newFile && oldFile) {
+        this.handleFileUpdate(newFile)
+      } else if (!newFile && oldFile) {
+        this.handleFileDelete()
+      }
+      
+      // 激活上传组件
+      this.activateUploadComponent(newFile, oldFile)
+    },
+    
+    /**
+     * 处理文件添加
+     */
+    handleFileAdd(newFile) {
+      console.log('add file:', newFile)
+      console.log('extensions:', this.extensions)
+      console.log('accept:', this.accept)
+      
+      // 生成或使用 groupId
+      this.ensureGroupId()
+      
+      // 验证文件类型
+      if (!this.validateFileType(newFile)) {
+        this.removeInvalidFile(newFile)
+        return
       }
-      if (!newFile && oldFile) {
-        // delete file
-        console.log('delete')
+      
+      console.log('文件类型验证通过，继续上传')
+    },
+    
+    /**
+     * 处理文件更新
+     */
+    handleFileUpdate(newFile) {
+      console.log('update', newFile)
+      const { success, active, chunk, response } = newFile
+      
+      if (chunk && success && !active) {
+        console.log('chunk end')
+        this.handleChunkComplete(response)
       }
+    },
+    
+    /**
+     * 处理文件删除
+     */
+    handleFileDelete() {
+      console.log('delete')
+    },
+    
+    /**
+     * 确保 groupId 存在
+     */
+    ensureGroupId() {
+      console.log('onWatchInputFiles - multiple:', this.multiple, 'current groupId:', this.groupId)
+      
+      if (this.multiple && !this.groupId) {
+        this.groupId = uuidv4()
+        console.log('Generated new groupId:', this.groupId)
+      } else if (this.multiple && this.groupId) {
+        console.log('Using existing groupId:', this.groupId)
+      }
+    },
+    
+    /**
+     * 移除无效文件
+     */
+    removeInvalidFile(file) {
+      console.log('文件类型验证失败，尝试移除文件')
+      console.log('uploadRef:', this.uploadRef)
+      console.log('$refs:', this.$refs)
+      
+      if (this.$refs[this.uploadRef]) {
+        this.$refs[this.uploadRef].remove(file)
+      } else {
+        console.error('无法找到 uploadRef 引用')
+      }
+    },
+    
+    /**
+     * 处理分片上传完成
+     */
+    handleChunkComplete(response) {
+      const { data: { file, type } } = response
+      const payloads = {
+        filePath: file.match(/\/cw(.*)/) ? file.match(/\/cw(.*)/)[0] : void 0,
+        asyncID: uuidv4(),
+        isDeleteOrigin: false,
+        toImage: type === 'pdf',
+        unzip: type === 'zip',
+        _csrf: localStorage.getItem('token')
+      }
+      
+      this.saveToServerAsyncPageTimer = setInterval(() => {
+        this.saveToServerAsyncPage(payloads)
+      }, CONSTANTS.SAVE_INTERVAL)
+    },
+    
+    /**
+     * 激活上传组件
+     */
+    activateUploadComponent(newFile, oldFile) {
       if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
         if (!this.$refs[this.uploadRef].active) {
           this.$refs[this.uploadRef].active = true
         }
       }
+    },
+    
+    // ==================== 值变化处理 ====================
+    
+    /**
+     * 重置文件状态
+     */
+    resetFiles() {
+      this.files = []
+      this.buildedFiles = []
+      // 多选模式下保留或生成 groupId，避免首次上传为空
+      if (this.multiple) {
+        if (!this.groupId) {
+          this.groupId = uuidv4()
+          console.log('Generated groupId in resetFiles:', this.groupId)
+        } else {
+          console.log('Preserve existing groupId in resetFiles:', this.groupId)
+        }
+      } else {
+        this.groupId = null
+        console.log('Reset groupId to null (single mode)')
+      }
+    },
+    
+    /**
+     * 处理多文件模式的值变化
+     */
+    async handleMultipleFileValue(value) {
+      // multiple - value 就是 groupId
+      // 只有当 groupId 发生变化时才重新获取文件列表（初始化回显）
+      if (this.groupId !== value) {
+        this.groupId = value
+        console.log('Set groupId from external value:', this.groupId)
+        await this.fetchFilesWithGroupId()
+      } else {
+        console.log('GroupId unchanged, skip fetchFilesWithGroupId')
+      }
+    },
+    
+    /**
+     * 处理单文件模式的值变化
+     */
+    async handleSingleFileValue() {
+      await this.fetchFileWithFileId()
     }
   }
 }
@@ -468,7 +794,13 @@ export default {
       display: flex;
       flex-direction: row;
       align-items: center;
-      .ele-file__suffix--icon {}
+      .ele-file__suffix--icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+      }
       .ele-file__name {
         flex: 1;
         text-align: left;