241019

src/components/SelectFile/index.vue

@@ -3,12 +3,20 @@
         align-items: center;
         justify-content: flex-start;flex-wrap: wrap">
     <template v-for="(item, index) in data" :key="index">
-      <video v-if="type === 'video'" :src="item.url" style="width: 400px; height: 200px" controls="controls"></video>
+      <div v-if="type === 'video' || item.url.includes('.mp4')" class="relative cursor-pointer" @click="open(item.url)">
+        <img
+          :src="item.url + '?x-oss-process=video/snapshot,t_2000,f_jpg,w_200,h_200'"
+          style="width: 80px; height: 80px"
+        />
+        <div class="absolute" style="left: 30px; top: 30px">
+          <play-circle-outlined style="font-size: 20px; color:white"/>
+        </div>
+      </div>
       <a-tag :key="item.url" closable @close="onDeleteItem(index)"
              @click.native="open(item.url)" style="cursor: pointer"
              v-else-if="type && ['audio', 'file'].includes(type)"> {{ item.url }}
       </a-tag>
-      <div class="image-upload-item" v-else>
+      <div class="image-upload-item bg-gray-300" v-else>
         <a-image-preview-group>
           <a-image
             :width="width"
@@ -57,7 +65,7 @@
 </template>
 
 <script lang="ts" setup>
-import {PlusOutlined, CloseOutlined} from '@ant-design/icons-vue';
+import {PlusOutlined, CloseOutlined, PlayCircleOutlined} from '@ant-design/icons-vue';
 import {ref} from 'vue';
 import SelectData from './components/select-data.vue';
 import {FileRecord} from '@/api/system/file/model';