资源详情,处理

src/utils/fileUtil.js

@@ -0,0 +1,52 @@
+/**
+ * 获取文件扩展名
+ * @param {string} filePath - 文件路径
+ * @returns {string} 文件扩展名（不包含点号）
+ */
+export function getFileExtension(filePath) {
+	if (!filePath || typeof filePath !== 'string') {
+		return ''
+	}
+
+	// 获取最后一个点号后的内容
+	const lastDotIndex = filePath.lastIndexOf('.')
+	if (lastDotIndex === -1 || lastDotIndex === filePath.length - 1) {
+		return ''
+	}
+
+	// 返回扩展名并转换为小写
+	return filePath.slice(lastDotIndex + 1).toLowerCase()
+}
+
+/**
+ * 根据文件路径判断是否为视频文件
+ * @param {string} filePath - 文件路径
+ * @returns {boolean} 是否为视频文件
+ */
+export function isVideoFile(filePath) {
+	const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm', 'm3u8']
+	const extension = getFileExtension(filePath)
+	return videoExtensions.includes(extension)
+}
+
+/**
+ * 根据文件路径判断是否为图片文件
+ * @param {string} filePath - 文件路径
+ * @returns {boolean} 是否为图片文件
+ */
+export function isImageFile(filePath) {
+	const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']
+	const extension = getFileExtension(filePath)
+	return imageExtensions.includes(extension)
+}
+
+/**
+ * 根据文件路径判断是否为文档文件
+ * @param {string} filePath - 文件路径
+ * @returns {boolean} 是否为文档文件
+ */
+export function isDocumentFile(filePath) {
+	const documentExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md']
+	const extension = getFileExtension(filePath)
+	return documentExtensions.includes(extension)
+}

src/views/resourceDetails/components/VideoDetails.vue

@@ -4,42 +4,19 @@
 		<div class="user-info-container">
 			<a-card :bordered="false" class="boxShadow cardBox mr-3 flex-3">
 				<div class="video-info">
-					<div
-						v-if="videoFormat == 'jpg' || videoFormat == 'bmp' || videoFormat == 'png' || videoFormat == 'jpeg'"
-						style="width: 100%; height: 600px"
-					>
-						<a-image width="100%" height="600px" :src="fileSrc(resSrc)" :preview="true" />
-					</div>
-					<div
-						v-if="
-							videoFormat == 'mkv' ||
-							videoFormat == 'mp4' ||
-							videoFormat == 'wmv' ||
-							videoFormat == 'avi' ||
-							videoFormat == 'flv' ||
-							videoFormat == 'mpeg' ||
-							videoFormat == 'mpg' ||
-							videoFormat == 'rmvb' ||
-							videoFormat == 'mov'
-						"
-						style="width: 100%; height: 600px"
-					>
-						<video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
-					</div>
-					<div
-						v-if="
-							videoFormat == 'docx' ||
-							videoFormat == 'doc' ||
-							videoFormat == 'ppt' ||
-							videoFormat == 'pptx' ||
-							videoFormat == 'xls' ||
-							videoFormat == 'xlsx' ||
-							videoFormat == 'pdf'
-						"
-						style="width: 100%; height: 600px"
-					>
-						<FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
-						<div v-if="!resSrc">暂无数据</div>
+					<div style="height: 600px">
+						<div v-if="isImageFile(resSrc)" style="width: 100%; height: 100%">
+							<a-image width="100%" height="100%" :src="fileSrc(resSrc)" :preview="true" />
+						</div>
+						<div v-if="isVideoFile(resSrc)" style="width: 100%; height: 100%">
+							<video :src="fileSrc(resSrc)" controls style="width: 100%; height: 100%" />
+						</div>
+						<div v-if="isDocumentFile(resSrc)" style="width: 100%; height: 100%">
+							<FilePreviewer v-if="resSrc" :fileUrl="fileSrc(resSrc)" :fileName="resName" :fileType="fileType" />
+						</div>
+						<div class="imgBox" v-if="unknownFile">
+							<a-image height="100%" :src="unknownFile" :preview="false" />
+						</div>
 					</div>
 					<!-- 用户信息部分 -->
 					<div class="user-info" style="display: flex; flex-direction: column">
@@ -148,6 +125,7 @@
 	import FilePreviewer from './FilePreviewer.vue'
 	import EventBus from '@/utils/EventBus'
 	import tool from '@/utils/tool'
+	import { isVideoFile, isImageFile, isDocumentFile } from '@/utils/fileUtil'
 	const route = useRoute()
 	const router = useRouter()
 	const props = defineProps({
@@ -220,6 +198,12 @@
 		itemData.value = data
 	}
 	const fileSrc = computed(() => (e) => sysConfig.FILE_URL + e)
+	const imageUrl = new URL(`@/assets/images/fileImg/file.png`, import.meta.url).href
+	const unknownFile = computed((e) => {
+		if (!isImageFile(resSrc.value) && !isVideoFile(resSrc.value) && !isDocumentFile(resSrc.value)) {
+			return imageUrl
+		}
+	})
 	const getData = (item) => {
 		detail({ id: item.id })
 			.then((res) => {
@@ -511,4 +495,10 @@
 	.flex-1 {
 		flex: 1;
 	}
+	.imgBox {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 </style>