|
|
@@ -0,0 +1,319 @@
|
|
|
+<template>
|
|
|
+ <div class="upload-box">
|
|
|
+ <el-upload
|
|
|
+ :id="uuid"
|
|
|
+ :accept="fileType.join(',')"
|
|
|
+ :action="uploadUrl"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :class="['upload', drag ? 'no-border' : '']"
|
|
|
+ :disabled="disabled"
|
|
|
+ :drag="drag"
|
|
|
+ :http-request="httpRequest"
|
|
|
+ :multiple="false"
|
|
|
+ :on-error="uploadError"
|
|
|
+ :on-success="uploadSuccess"
|
|
|
+ :show-file-list="false"
|
|
|
+ >
|
|
|
+ <template v-if="modelValue">
|
|
|
+ <video :src="modelValue" class="upload-video" controls></video>
|
|
|
+ <div class="upload-handle" @click.stop>
|
|
|
+ <div v-if="!disabled" class="handle-icon" @click="editVideo">
|
|
|
+ <Icon icon="ep:edit" />
|
|
|
+ <span v-if="showBtnText">{{ t('action.edit') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="handle-icon" @click="videoPreview(modelValue)">
|
|
|
+ <Icon icon="ep:zoom-in" />
|
|
|
+ <span v-if="showBtnText">{{ t('action.detail') }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="showDelete && !disabled" class="handle-icon" @click="deleteVideo">
|
|
|
+ <Icon icon="ep:delete" />
|
|
|
+ <span v-if="showBtnText">{{ t('action.del') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="upload-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <Icon icon="ep:plus" />
|
|
|
+ <!-- <span>请上传视频</span> -->
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <!-- 上传进度条 -->
|
|
|
+ <div v-if="isUploading" class="uploadProgress">
|
|
|
+ <el-progress :percentage="uploadProgress" />
|
|
|
+ <div class="text-xs text-gray-500 text-right mt-1">{{ uploadProgress }}% 已上传</div>
|
|
|
+ </div>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ <slot name="tip"></slot>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import type { UploadProps } from 'element-plus'
|
|
|
+
|
|
|
+import { generateUUID } from '@/utils'
|
|
|
+import { propTypes } from '@/utils/propTypes'
|
|
|
+import { useUpload } from '@/components/UploadFile/src/useUpload'
|
|
|
+import request from '@/config/axios'
|
|
|
+
|
|
|
+defineOptions({ name: 'UploadVideo2' })
|
|
|
+
|
|
|
+// 视频类型定义
|
|
|
+type FileTypes =
|
|
|
+ | 'video/mp4'
|
|
|
+ | 'video/avi'
|
|
|
+ | 'video/mov'
|
|
|
+ | 'video/flv'
|
|
|
+ | 'video/webm'
|
|
|
+ | 'video/ogg'
|
|
|
+
|
|
|
+// 接受父组件参数
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: propTypes.string.def(''),
|
|
|
+ drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
|
|
|
+ disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
|
|
|
+ fileSize: propTypes.number.def(500), // 视频大小限制 ==> 非必传（默认为 500M）
|
|
|
+ fileType: propTypes.array.def(['video/mp4', 'video/avi', 'video/mov', 'video/flv']), // 视频类型限制 ==> 非必传
|
|
|
+ height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
|
|
|
+ width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
|
|
|
+ borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
|
|
|
+ showDelete: propTypes.bool.def(true), // 是否显示删除按钮
|
|
|
+ showBtnText: propTypes.bool.def(true), // 是否显示按钮文字
|
|
|
+ directory: propTypes.string.def(undefined) // 上传目录 ==> 非必传（默认为 undefined）
|
|
|
+})
|
|
|
+
|
|
|
+const { t } = useI18n() // 国际化
|
|
|
+const message = useMessage() // 消息弹窗
|
|
|
+// 生成组件唯一id
|
|
|
+const uuid = ref('id-' + generateUUID())
|
|
|
+
|
|
|
+// 上传进度相关状态
|
|
|
+const uploadProgress = ref(0)
|
|
|
+const isUploading = ref(false)
|
|
|
+
|
|
|
+const emit = defineEmits(['update:modelValue', 'upload-progress', 'upload-start', 'upload-complete'])
|
|
|
+
|
|
|
+const deleteVideo = () => {
|
|
|
+ emit('update:modelValue', '')
|
|
|
+}
|
|
|
+
|
|
|
+const { uploadUrl } = useUpload(props.directory)
|
|
|
+
|
|
|
+// 自定义httpRequest方法
|
|
|
+const httpRequest: UploadProps['httpRequest'] = async (options) => {
|
|
|
+ try {
|
|
|
+ // 触发上传开始事件
|
|
|
+ emit('upload-start')
|
|
|
+ isUploading.value = true
|
|
|
+ uploadProgress.value = 0
|
|
|
+
|
|
|
+ const formData = new FormData()
|
|
|
+ formData.append('file', options.file as File)
|
|
|
+
|
|
|
+ // 使用axios的upload方法，并传入onProgress回调
|
|
|
+ const res = await request.upload({
|
|
|
+ url: uploadUrl,
|
|
|
+ data: formData,
|
|
|
+ onProgress: (progress: number) => {
|
|
|
+ // 触发上传进度事件
|
|
|
+ uploadProgress.value = progress
|
|
|
+ emit('upload-progress', progress)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 调用成功回调
|
|
|
+ options.onSuccess(res)
|
|
|
+ } catch (error) {
|
|
|
+ // 调用失败回调
|
|
|
+ options.onError(error)
|
|
|
+ } finally {
|
|
|
+ // 触发上传完成事件
|
|
|
+ isUploading.value = false
|
|
|
+ uploadProgress.value = 100
|
|
|
+ emit('upload-complete')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const editVideo = () => {
|
|
|
+ const dom = document.querySelector(`#${uuid.value} .el-upload__input`)
|
|
|
+ dom && dom.dispatchEvent(new MouseEvent('click'))
|
|
|
+}
|
|
|
+
|
|
|
+const videoPreview = (videoUrl: string) => {
|
|
|
+ // 打开视频预览
|
|
|
+ window.open(videoUrl, '_blank')
|
|
|
+}
|
|
|
+
|
|
|
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
|
|
+ const videoSize = rawFile.size / 1024 / 1024 < props.fileSize
|
|
|
+ const videoType = props.fileType
|
|
|
+ if (!videoType.includes(rawFile.type as FileTypes))
|
|
|
+ message.notifyWarning('上传视频不符合所需的格式！')
|
|
|
+ if (!videoSize) message.notifyWarning(`上传视频大小不能超过 ${props.fileSize}M！`)
|
|
|
+ return videoType.includes(rawFile.type as FileTypes) && videoSize
|
|
|
+}
|
|
|
+
|
|
|
+// 视频上传成功提示
|
|
|
+const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
|
|
|
+ emit('update:modelValue', res.data)
|
|
|
+}
|
|
|
+
|
|
|
+// 视频上传错误提示
|
|
|
+const uploadError = () => {
|
|
|
+ message.notifyError('视频上传失败，请您重新上传！')
|
|
|
+ isUploading.value = false
|
|
|
+ uploadProgress.value = 0
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.is-error {
|
|
|
+ .upload {
|
|
|
+ :deep(.el-upload),
|
|
|
+ :deep(.el-upload-dragger) {
|
|
|
+ border: 1px dashed var(--el-color-danger) !important;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--el-color-primary) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.disabled) {
|
|
|
+ .el-upload,
|
|
|
+ .el-upload-dragger {
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ background: var(--el-disabled-bg-color);
|
|
|
+ border: 1px dashed var(--el-border-color-darker) !important;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border: 1px dashed var(--el-border-color-darker) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.upload-box {
|
|
|
+ .no-border {
|
|
|
+ :deep(.el-upload) {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.upload) {
|
|
|
+ .el-upload {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: v-bind(width);
|
|
|
+ height: v-bind(height);
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px dashed var(--el-border-color-darker);
|
|
|
+ border-radius: v-bind(borderradius);
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+
|
|
|
+ .upload-handle {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload-dragger {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px dashed var(--el-border-color-darker);
|
|
|
+ border-radius: v-bind(borderradius);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border: 1px dashed var(--el-color-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload-dragger.is-dragover {
|
|
|
+ background-color: var(--el-color-primary-light-9);
|
|
|
+ border: 2px dashed var(--el-color-primary) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-empty {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ color: var(--el-color-info);
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-handle {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgb(0 0 0 / 60%);
|
|
|
+ opacity: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .handle-icon {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 6%;
|
|
|
+ color: aliceblue;
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ margin-bottom: 40%;
|
|
|
+ font-size: 130%;
|
|
|
+ line-height: 130%;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 85%;
|
|
|
+ line-height: 85%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-upload__tip {
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadProgress {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
