【升级】支持视频上传、视频预览、上传成功事件

snowy-admin-web/src/components/XnUpload/README.md

@@ -31,7 +31,7 @@
 |----|--------|---------------------------------------|-----------------------------|
 | 1  | value  | 根据uploadResultType、completeResult 而定  | 当选择用户后通过v-model:value绑定到组件上 |
 | 2  | onChange | 根据uploadResultType、completeResult 而定  | 通过@onChange 方法返回上传的数据       |
-
+| 3  | onSuccessful |  fileUrl | 通过@onSuccessful 方法接收上传成功的文件url     |
 ### slot定义
 
 | 序号 | 插槽名    | 用途          | 

snowy-admin-web/src/components/XnUpload/index.vue

@@ -18,6 +18,27 @@
 			</a-button>
 		</a-upload>
 
+		<a-upload
+			v-if="props.uploadMode === 'video'"
+			v-model:file-list="fileList"
+			name="file"
+			:action="action"
+			:headers="headers"
+			:maxCount="props.uploadNumber"
+			:before-upload="beforeUpload"
+			list-type="picture-card"
+			@change="handleChange"
+			@preview="handlePreview"
+			:progress="progress"
+			:showUploadList="props.showUploadList"
+			:accept="accept"
+		>
+			<div class="clearfix" v-if="fileList.length < props.uploadNumber">
+				<plus-outlined />
+				<div style="margin-top: 8px">{{ props.uploadText }}</div>
+			</div>
+		</a-upload>
+
 		<a-upload
 			v-if="props.uploadMode === 'image'"
 			v-model:file-list="fileList"
@@ -38,14 +59,24 @@
 				<div style="margin-top: 8px">{{ props.uploadText }}</div>
 			</div>
 		</a-upload>
-		<a-modal
+
-			v-if="props.uploadMode === 'image'"
+		<!-- 文件预览 -->
-			:open="previewVisible"
+		<a-modal :open="previewVisible"	:title="previewTitle" :footer="null" @cancel="handleCancel">
-			:title="previewTitle"
+			<template v-if="props.uploadMode === 'image'">
-			:footer="null"
+				<img alt="example" style="width: 100%" :src="previewObj" />
-			@cancel="handleCancel"
+			</template>
-		>
+			<template v-else-if="props.uploadMode === 'video'">
-			<img alt="example" style="width: 100%" :src="previewImage" />
+				<video width="100%" controls type="video" id="video">
+					<source :src="previewObj" type="video/mp4" />
+					<object :data="previewObj" width="100%">
+						<embed :src="previewObj" width="100%" />
+       	 	</object>
+        	您的浏览器不支持video标签哦，请联系管理员
+      	</video>
+			</template>
+			<template v-else>
+				暂不支持该文件预览
+			</template>
 		</a-modal>
 
 		<a-upload-dragger
@@ -80,10 +111,10 @@
 	import { message, Upload } from 'ant-design-vue'
 	import { cloneDeep } from 'lodash-es'
 	const fileList = ref([])
-	const emit = defineEmits(['update:value', 'onChange'])
+	const emit = defineEmits(['update:value', 'onChange', 'onSuccessful'])
 	const previewVisible = ref(false)
 	const previewTitle = ref('')
-	const previewImage = ref('')
+	const previewObj = ref('')
 	const headers = ref({
 		token: tool.data.get('TOKEN')
 	})
@@ -107,7 +138,7 @@
 			default: convertUrl('/dev/file/download?id='),
 			required: false
 		},
-		// 上传样式或图片方式 file || drag || image
+		// 上传样式或图片方式 file || video || drag || image
 		uploadMode: {
 			type: String,
 			default: 'file',
@@ -268,28 +299,37 @@
 	}
 	// 这是兜底逻辑，保准只让这个image类型上传图片
 	const beforeUpload = (file) => {
-		const isPNG = file.type.startsWith('image/')
+		if (props.uploadMode == 'image') {
-		if (!isPNG) {
+			const isPNG = file.type.startsWith('image/')
-			message.warning('只能上传图片类型文件')
+			if (!isPNG) {
+				message.warning('只能上传图片类型文件')
+			}
+			return isPNG || Upload.LIST_IGNORE
+		}
+		else if (props.uploadMode == 'video') {
+			const isVideo = file.type.startsWith('video/')
+			if (!isVideo) {
+				message.warning('只能上传视频类型文件')
+			}
+			return isVideo || Upload.LIST_IGNORE
 		}
-		return isPNG || Upload.LIST_IGNORE
 	}
-	// 预览图片
+	// 预览资源
 	const handlePreview = async (file) => {
 		previewVisible.value = true
 		previewTitle.value = file.name
 		// 如果返回的是id
 		if (props.uploadResultType === 'id') {
-			previewImage.value = sysConfig.API_URL + props.uploadIdDownloadUrl + file.response.data
+			previewObj.value = sysConfig.API_URL + props.uploadIdDownloadUrl + file.response.data
 		} else {
-			previewImage.value = file.response.data
+			previewObj.value = file.response.data
 		}
 	}
 	// 关闭预览窗口
 	const handleCancel = () => {
 		previewVisible.value = false
 		previewTitle.value = ''
-		previewImage.value = ''
+		previewObj.value = ''
 	}
 	// 上传事件
 	const handleChange = (uploads) => {
@@ -308,6 +348,7 @@
 						data.response.data + (resultIntervalValue.value ? ',' + resultIntervalValue.value : '')
 				})
 				emit('update:value', resultIntervalValue)
+				emit('onSuccessful',resultIntervalValue)
 				emit('onChange', resultIntervalValue)
 			} else if (props.uploadResultCategory === 'array') {
 				if (props.completeResult) {
@@ -319,13 +360,16 @@
 						}
 					})
 					emit('update:value', newResult)
+					emit('onSuccessful',newResult)
 					emit('onChange', newResult)
-				} else {
+				} 
+				else {
 					const resultArrayValue = ref([])
 					result.forEach((data) => {
 						resultArrayValue.value.push(data.response.data)
 					})
 					emit('update:value', resultArrayValue)
+					emit('onSuccessful',resultArrayValue)
 					emit('onChange', resultArrayValue)
 				}
 			}