瀏覽代碼

```
feat(file-uploader): 添加文件预览功能并优化文件移除逻辑

- 在FileUploader组件中为file-list模板添加index参数
- 修改handlePreview和handleRemove方法以接收index参数
- 优化handleRemove方法中的文件查找逻辑,仅基于uid进行匹配
- 添加控制台日志用于调试文件操作
- 从环境配置中移除硬编码的API基础URL
- 在package.json中添加test构建脚本
```

zhangningning 1 月之前
父節點
當前提交
35f9c73f72
共有 4 個文件被更改,包括 8 次插入7 次删除
  1. 0 0
      .env.development
  2. 0 0
      .env.production
  3. 1 0
      package.json
  4. 7 7
      src/components/FileUploader.vue

src/.env.development → .env.development


src/.env.production → .env.production


+ 1 - 0
package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host",
+    "build:test": "vite build --mode development",
     "build": "vite build",
     "build:prod": "vite build --mode production",
     "preview": "vite preview"

+ 7 - 7
src/components/FileUploader.vue

@@ -53,13 +53,13 @@
         </template>
       </template>
       
-      <template #file-list="{ file }">
+      <template #file-list="{ file , index}">
         <div>
           <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
           <span class="el-upload-list__item-actions">
             <span
               class="el-upload-list__item-preview"
-              @click="handlePreview(file)"
+              @click="handlePreview(file,index)"
             >
               <el-icon><zoom-in /></el-icon>
             </span>
@@ -73,7 +73,7 @@
             <span
               v-if="!disabled"
               class="el-upload-list__item-delete"
-              @click="handleRemove(file)"
+              @click="handleRemove(file,index)"
             >
               <el-icon><Delete /></el-icon>
             </span>
@@ -386,9 +386,9 @@ const handleRemove = (file) => {
   // fileList.value = fileList.value.filter(f => f.url !== file.url)
   // 从fileList中移除该文件
   const index = fileList.value.findIndex(f => 
-    f.uid === file.uid || f.url === file.url || f.id === file.id
+    f.uid === file.uid
   )
-  
+  console.log('index:', index,fileList.value)
   if (index > -1) {
     fileList.value.splice(index, 1)
   }
@@ -401,8 +401,8 @@ const handleExceed = (files, fileList) => {
 }
 
 // 文件预览处理
-const handlePreview = (file) => {
-  console.log('预览文件:', file)
+const handlePreview = (file,index) => {
+  console.log('预览文件:', file,index)
   currentPreviewFile.value = file
   
   // 图片文件直接预览