feat: 取消视频播放

src/components/FileUpload/index.vue

@@ -50,13 +50,11 @@
           <img v-if="file.status == 'success'" :src="file.url" :alt="file.name">
         </div>
 
-        <div v-else-if="file.type.includes('video')" class="preview-content">
-          <video
-            v-if="file.status == 'success'"
-            :src="file.url"
-            controls
-            preload="metadata"
-          ></video>
+        <div v-else-if="file.type.includes('video')" class="preview-content video-filename">
+          <div v-if="file.status == 'success'" class="filename-info">
+            <i class="el-icon-video-camera-solid" style="font-size: 20px; color: #409EFF; margin-bottom: 5px;"></i>
+            <div class="filename-text">{{ file.name }}</div>
+          </div>
         </div>
 
         <el-progress
@@ -355,6 +353,15 @@ export default {
           URL.revokeObjectURL(file.url)
         }
       })
+    },
+
+    // 格式化文件大小
+    formatFileSize(bytes) {
+      if (bytes === 0) return '0 B'
+      const k = 1024
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+      const i = Math.floor(Math.log(bytes) / Math.log(k))
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
     }
   },
 }
@@ -484,4 +491,32 @@ upload-waiting {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* 视频文件名样式 */
+.video-filename {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fc;
+  padding: 10px;
+}
+
+.filename-info {
+  text-align: center;
+  color: #606266;
+  max-width: 100%;
+}
+
+.filename-text {
+  font-size: 12px;
+  color: #303133;
+  word-break: break-all;
+  line-height: 1.4;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 </style>