feat(上传组件): 添加文件删除功能和显示文件名

- 在音视频上传组件中添加删除文件功能 - 显示上传文件的文件名 - 移除上传按钮的自定义模板，使用默认样式 - 添加分割线组件提升视觉分隔效果 - 更新文件上传后的处理逻辑以包含文件名

feat(上传组件): 添加文件删除功能和显示文件名
- 在音视频上传组件中添加删除文件功能 - 显示上传文件的文件名 - 移除上传按钮的自定义模板，使用默认样式 - 添加分割线组件提升视觉分隔效果 - 更新文件上传后的处理逻辑以包含文件名
hookehuyr
Commit 688f2809cff0b33b400b926a670ca47fc65befe5 688f2809 1 parent 76f651cc
Showing 3 changed files with 49 additions and 18 deletions
src/components.d.ts
src/views/checkin/upload/audio.vue
src/views/checkin/upload/video.vue
--- a/src/components.d.ts
View file @688f280
+++ b/src/components.d.ts
View file @688f280
@@ -38,6 +38,7 @@ declare module 'vue' {
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDatePicker: typeof import('vant/es')['DatePicker']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanDivider: typeof import('vant/es')['Divider']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
--- a/src/views/checkin/upload/audio.vue
View file @688f280
+++ b/src/views/checkin/upload/audio.vue
View file @688f280
 <!--
  * @Date: 2025-06-03 09:41:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-06 17:52:29
+ * @LastEditTime: 2025-06-06 21:17:15
  * @FilePath: /mlaj/src/views/checkin/upload/audio.vue
  * @Description: 音视频文件上传组件
 -->
@@ -20,15 +20,14 @@
         accept="audio/*"
         result-type="file"
         upload-icon="plus"
+        :deletable="false"
       >
-        <template #upload-text>
-          <!-- :accept="route.query.type === 'video' ? 'video/*' : 'audio/*'" -->
-          <div class="text-center">
-            <van-icon name="plus" size="24" />
-            <div class="mt-1 text-sm text-gray-600">上传文件</div>
-          </div>
-        </template>
       </van-uploader>
+      <van-row v-for="(item, index) in fileList" :key="index" class="mt-2 text-s text-gray-500">
+        <van-col span="22">{{ item.name }}</van-col>
+        <van-col span="2" @click="delItem(item)"><van-icon name="clear" /></van-col>
+      </van-row>
+      <van-divider />
       <div class="mt-2 text-xs text-gray-500">最多上传{{ max_count }}个文件，每个不超过20M</div>
       <div class="mt-2 text-xs text-gray-500">上传类型:&nbsp;音频文件</div>
     </div>
@@ -228,6 +227,7 @@ const afterRead = async (file) => {
         item.message = '上传成功'
         item.url = result.url
         item.meta_id = result.meta_id
+        item.name = result.name
       } else {
         item.status = 'failed'
         item.message = '上传失败'
@@ -244,6 +244,7 @@ const afterRead = async (file) => {
       file.message = '上传成功'
       file.url = result.url
       file.meta_id = result.meta_id
+      file.name = result.name
     } else {
       file.status = 'failed'
       file.message = '上传失败'
@@ -316,6 +317,7 @@ onMounted(async () => {
     const { code, data } = await getUploadTaskInfoAPI({ i: route.query.post_id });
     if (code) {
       fileList.value = data.files.map(item => ({
+        name: item.name,
         url: item.value,
         status: 'done',
         message: '上传成功',
@@ -324,7 +326,14 @@ onMounted(async () => {
       message.value = data.note
     }
   }
-})
+});
+
+const delItem = (item) => {
+  const index = fileList.value.indexOf(item)
+  if (index!== -1) {
+    fileList.value.splice(index, 1)
+  }
+}
 </script>
 <style lang="less" scoped>
@@ -339,4 +348,16 @@ onMounted(async () => {
   justify-content: center;
   height: 100%;
 }
+
+.preview-cover {
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 4px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.3);
+  }
 </style>
--- a/src/views/checkin/upload/video.vue
View file @688f280
+++ b/src/views/checkin/upload/video.vue
View file @688f280
 <!--
  * @Date: 2025-06-03 09:41:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-06 17:54:23
+ * @LastEditTime: 2025-06-06 21:20:43
  * @FilePath: /mlaj/src/views/checkin/upload/video.vue
  * @Description: 音视频文件上传组件
 -->
@@ -20,15 +20,14 @@
         accept="video/*"
         result-type="file"
         upload-icon="plus"
+        :deletable="false"
       >
-        <template #upload-text>
-          <!-- :accept="route.query.type === 'video' ? 'video/*' : 'audio/*'" -->
-          <div class="text-center">
-            <van-icon name="plus" size="24" />
-            <div class="mt-1 text-sm text-gray-600">上传文件</div>
-          </div>
-        </template>
       </van-uploader>
+      <van-row v-for="(item, index) in fileList" :key="index" class="mt-2 text-s text-gray-500">
+        <van-col span="22">{{ item.name }}</van-col>
+        <van-col span="2" @click="delItem(item)"><van-icon name="clear" /></van-col>
+      </van-row>
+      <van-divider />
       <div class="mt-2 text-xs text-gray-500">最多上传{{ max_count }}个文件，每个不超过20M</div>
       <div class="mt-2 text-xs text-gray-500">上传类型:&nbsp;视频文件</div>
     </div>
@@ -228,6 +227,7 @@ const afterRead = async (file) => {
         item.message = '上传成功'
         item.url = result.url
         item.meta_id = result.meta_id
+        item.name = result.name
       } else {
         item.status = 'failed'
         item.message = '上传失败'
@@ -244,6 +244,7 @@ const afterRead = async (file) => {
       file.message = '上传成功'
       file.url = result.url
       file.meta_id = result.meta_id
+      file.name = result.name
     } else {
       file.status = 'failed'
       file.message = '上传失败'
@@ -320,11 +321,19 @@ onMounted(async () => {
         status: 'done',
         message: '上传成功',
         meta_id: item.meta_id,
+        name: item.name,
       }))
       message.value = data.note
     }
   }
-})
+});
+
+const delItem = (item) => {
+  const index = fileList.value.indexOf(item)
+  if (index!== -1) {
+    fileList.value.splice(index, 1)
+  }
+}
 </script>
 <style lang="less" scoped>