Prechádzať zdrojové kódy

修复文件类型判断和上传组件问题,视频查看

tanshanming 8 mesiacov pred
rodič
commit
f7bb8d78bf

+ 7 - 8
src/libs/globalFunction/file.js

@@ -213,7 +213,7 @@ const fileFunction = {
 		console.log('handleImgPreview--', router.currentRoute.value.query.fileType)
 		// 图片分类下 - 传递整个页面的图片列表;非图片分类下 - 由单个图片构建图片列表
 		const imgList =
-			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType.fileType) === 1
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 1
 				? imgInfoList.map((item) => {
 						return {
 							...item,
@@ -229,7 +229,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex =
-			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType.fileType) === 1
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 1
 				? currentIndex
 				: 0
 
@@ -243,9 +243,9 @@ const fileFunction = {
 	 */
 	handleVideoPreview(currentIndex, videoInfo = {}, videoInfoList = []) {
 		// 视频分类下 - 传递整个页面的视频列表;非视频分类下 - 由单个视频构建视频列表
+		console.log('查看视频', router.currentRoute.value)
 		const videoList =
-			router.currentRoute.value.query.fileType.fileType &&
-			Number(router.currentRoute.value.query.fileType.fileType) === 3
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 3
 				? videoInfoList.map((item) => {
 						return {
 							...item,
@@ -261,8 +261,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex =
-			router.currentRoute.value.query.fileType.fileType &&
-			Number(router.currentRoute.value.query.fileType.fileType) === 3
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 3
 				? currentIndex
 				: 0
 		fileOperationPlugins.openBox.videoPreview({ videoList, defaultIndex })
@@ -276,7 +275,7 @@ const fileFunction = {
 	handleAudioPreview(currentIndex, audioInfo = {}, audioInfoList = []) {
 		// 音频分类下 - 传递整个页面的音频列表;非音频分类下 - 由单个音频构建音频列表
 		const audioList =
-			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType.fileType) === 4
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 4
 				? audioInfoList.map((item) => {
 						return {
 							...item,
@@ -292,7 +291,7 @@ const fileFunction = {
 						}
 				  ]
 		const defaultIndex =
-			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType.fileType) === 4
+			router.currentRoute.value.query.fileType && Number(router.currentRoute.value.query.fileType) === 4
 				? currentIndex
 				: 0
 		fileOperationPlugins.openBox.audioPreview({ audioList, defaultIndex })

+ 47 - 43
src/views/myResource/file/box/uploadFile/Box.vue

@@ -5,7 +5,6 @@
 			class="uploader-app"
 			ref="uploaderRef"
 			:options="options"
-			:opts="opts"
 			:autoStart="false"
 			:fileStatusText="fileStatusText"
 			@files-added="handleFilesAdded"
@@ -77,12 +76,10 @@
 </template>
 
 <script setup>
-	import { ref, computed, defineExpose, nextTick, inject } from 'vue'
+	import { ref, computed, defineExpose, nextTick, inject, getCurrentInstance } from 'vue'
 	import { message } from 'ant-design-vue'
 	import { useMyResourceStore } from '@/store/myResource'
 	import SparkMD5 from 'spark-md5'
-	import sysConfig from '@/config/index'
-	import rsConfig from '@/config/reSource'
 	import tool from '@/utils/tool'
 	import {
 		UploadOutlined,
@@ -101,7 +98,7 @@
 		callType: 1,
 		callback: () => {}
 	})
-
+	const { proxy } = getCurrentInstance()
 	const store = useMyResourceStore()
 
 	// refs
@@ -130,7 +127,7 @@
 	})
 
 	const options = ref({
-		target: `${sysConfig.API_URL}${rsConfig.baseContext}/filetransfer/uploadfile`,
+		target: `${proxy.$RESOURCE_CONFIG.baseContext}/filetransfer/uploadfile`,
 		chunkSize: 1024 * 1024,
 		fileParameterName: 'file',
 		maxChunkRetries: 3,
@@ -163,7 +160,7 @@
 	})
 
 	const attrs = ref({
-		accept: 'image/*,application/*,text/*'
+		accept: '*'
 	})
 
 	const panelShow = ref(false)
@@ -261,45 +258,52 @@
 	}
 
 	const handleFilesAdded = (filesSource) => {
-		const inconformityFileArr = []
-		const files = filesSource.filter((file) => {
-			const isFile = isImageOrDocument(file)
-			if (isFile) {
-				return file
-			} else {
-				inconformityFileArr.push(file)
-			}
-		})
-
-		if (inconformityFileArr.length > 0) {
-			filesSource.ignored = true
-			message.warning('文件夹中有不符合要求的文件', {
-				duration: 0,
-				content: '无'
-				// content: () => {
-				// 	let warringHtml = ''
-				// 	inconformityFileArr.forEach((item, index) => {
-				// 		warringHtml += `<p><i style="margin-right:5px">${index + 1}.</i>${item.name}</p>`
-				// 	})
-				// 	return (
-				// 		<div>
-				// 			<div style="color:#E6A23C;width:290px">{warringHtml}</div>
-				// 			<p style="color:#f56c6c">只可以上传图片和文档!文件大小不能为0!</p>
-				// 		</div>
-				// 	)
-				// }
-			})
-			return false
-		}
-
-		const filesTotalSize = files.reduce((pre, next) => pre + next.size, 0)
+		// const inconformityFileArr = []
+		// const files = filesSource.filter((file) => {
+		// 	const isFile = isImageOrDocument(file)
+		// 	if (isFile) {
+		// 		return file
+		// 	} else {
+		// 		inconformityFileArr.push(file)
+		// 	}
+		// })
+
+		// if (inconformityFileArr.length > 0) {
+		// 	filesSource.ignored = true
+		// 	message.warning('文件夹中有不符合要求的文件', {
+		// 		duration: 0,
+		// 		content: '无'
+		// 		// content: () => {
+		// 		// 	let warringHtml = ''
+		// 		// 	inconformityFileArr.forEach((item, index) => {
+		// 		// 		warringHtml += `<p><i style="margin-right:5px">${index + 1}.</i>${item.name}</p>`
+		// 		// 	})
+		// 		// 	return (
+		// 		// 		<div>
+		// 		// 			<div style="color:#E6A23C;width:290px">{warringHtml}</div>
+		// 		// 			<p style="color:#f56c6c">只可以上传图片和文档!文件大小不能为0!</p>
+		// 		// 		</div>
+		// 		// 	)
+		// 		// }
+		// 	})
+		// 	return false
+		// }
+
+		// const filesTotalSize = files.reduce((pre, next) => pre + next.size, 0)
+		const filesTotalSize = filesSource
+			.map((item) => item.size)
+			.reduce((pre, next) => {
+				return pre + next
+			}, 0)
 
 		if (remainderStorageValue.value < filesTotalSize) {
-			message.warning(`剩余存储空间不足,请重新选择${files.length > 1 ? '批量' : ''}文件`)
-			filesSource.ignored = true
+			// 批量选择的文件超出剩余存储空间
+			message.warning(`剩余存储空间不足,请重新选择${filesSource.length > 1 ? '批量' : ''}文件`)
+			filesSource.ignored = true // 本次选择的文件过滤掉
 		} else {
-			filesLength.value += files.length
-			files.forEach((file) => {
+			// 批量或单个选择的文件未超出剩余存储空间,正常上传
+			filesLength.value += filesSource.length
+			filesSource.forEach((file) => {
 				dropBoxShow.value = false
 				panelShow.value = true
 				collapse.value = false

+ 2 - 2
src/views/myResource/file/box/uploadFile/index.js

@@ -4,7 +4,7 @@ import UploadFileBox from './Box.vue'
 import uploader from 'vue-simple-uploader'
 import 'vue-simple-uploader/dist/style.css'
 import Antd from 'ant-design-vue'
-
+import snowy from '@/snowy'
 let appInstance = null
 let vm = null
 let currentPropsData = null // 保存当前的 props 数据
@@ -31,7 +31,7 @@ const initInstanceUploadFile = (params, uploadWay, serviceEl, callType, callback
 
 	appInstance.use(uploader)
 	appInstance.use(Antd)
-
+	appInstance.use(snowy)
 	vm = appInstance.mount(container)
 	document.body.appendChild(container)
 

+ 2 - 1
src/views/myResource/file/box/videoPreview/VideoPlayer.vue

@@ -53,7 +53,8 @@
 	onMounted(() => {
 		player = videojs(videoPlayer.value, options)
 		window.videojs = videojs
-		require('video.js/dist/lang/zh-CN.js')
+		// 使用 require 加载中文语言包
+		import('video.js/dist/lang/zh-CN.js')
 	})
 
 	onBeforeUnmount(() => {

+ 2 - 0
src/views/myResource/file/box/videoPreview/index.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import Antd from 'ant-design-vue'
+import snowy from '@/snowy'
 // 导入组件
 import VideoPreview from './BoxMask.vue'
 
@@ -21,6 +22,7 @@ const initInstanceVideoPreview = (videoList, defaultIndex, callback) => {
 	})
 	// 注册 Ant Design Vue 组件
 	videoPreviewApp.use(Antd)
+	videoPreviewApp.use(snowy)
 	videoPreviewInstance = videoPreviewApp.mount(mountNode)
 	return mountNode
 }