3 changed files with 83 additions and 443 deletions
@ -1,102 +1,12 @@ |
|||
<template> |
|||
<el-upload |
|||
:action="uploadUrl" :drag="true" :before-remove="beforeRemove" |
|||
:on-success="videoUploadOk" :show-file-list="true" |
|||
:on-error="videoUploadErr" |
|||
:on-preview="selectVideo" |
|||
style="width: 50%;" |
|||
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"> |
|||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|||
<div class="el-upload__text"> |
|||
拖拽视频文件到此 或 <em>点此上传</em> |
|||
</div> |
|||
<template #tip> |
|||
<div class="el-upload__tip"> |
|||
<!-- jpg/png files with a size less than 500kb --> |
|||
</div> |
|||
</template> |
|||
</el-upload> |
|||
|
|||
<video v-if="videoReady" :src="videoResource" loop controls style="width: 50%;"></video> |
|||
<video :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></video> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { uploadUrl } from '@/api/DesignForm' |
|||
import { UploadFilled } from '@element-plus/icons-vue' |
|||
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload'; |
|||
//视频地址 |
|||
const videoResource = ref<string>() |
|||
//上传是否成功 |
|||
const videoReady = ref(false) |
|||
type VideoMsg = { |
|||
CreatedAt: string |
|||
UpdatedAt: string |
|||
fileSize: bigint |
|||
id: bigint |
|||
key: string |
|||
name: string |
|||
physicspath: string |
|||
size: string |
|||
tag: string |
|||
type: number |
|||
url: string |
|||
} |
|||
//成功上传的视频 |
|||
const videoArr = reactive<VideoMsg[]>([]); |
|||
const emits = defineEmits(["addedVideo"]); |
|||
//上传成功钩子 |
|||
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) { |
|||
videoResource.value = response.data.url; |
|||
videoReady.value = true; |
|||
//console.log(response) |
|||
const videoMsg:VideoMsg = { |
|||
CreatedAt: '', |
|||
UpdatedAt: '', |
|||
fileSize: 0n, |
|||
id: 0n, |
|||
key: '', |
|||
name: '', |
|||
physicspath: '', |
|||
size: '', |
|||
tag: '', |
|||
type: 0, |
|||
url: '' |
|||
} |
|||
videoMsg.CreatedAt = response.data.CreatedAt; |
|||
videoMsg.UpdatedAt = response.data.UpdatedAt; |
|||
videoMsg.fileSize = response.data.fileSize; |
|||
videoMsg.id = response.data.id; |
|||
videoMsg.key = response.data.key; |
|||
videoMsg.name = response.data.name; |
|||
videoMsg.physicspath = response.data.physicspath; |
|||
videoMsg.size = response.data.size; |
|||
videoMsg.tag = response.data.tag; |
|||
videoMsg.type = response.data.type; |
|||
videoMsg.url = response.data.url; |
|||
videoArr.push(videoMsg); |
|||
//console.log(videoArr) |
|||
emits("addedVideo",videoArr) |
|||
} |
|||
|
|||
//删除钩子 禁止删除 |
|||
function beforeRemove(){ |
|||
return false; |
|||
} |
|||
|
|||
//上传失败钩子 |
|||
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){ |
|||
alert("上传失败,请重试") |
|||
console.log("上传失败"+error); |
|||
|
|||
} |
|||
//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src |
|||
function selectVideo(uploadFile: UploadFile){ |
|||
import uselowcodevideoStore from '@/store/modules/lowcodevideo' |
|||
const lowcodevideoStore = uselowcodevideoStore(); |
|||
|
|||
const res:any = uploadFile.response; |
|||
const resd = res.data; |
|||
const resdurl = resd.url; |
|||
videoResource.value = resdurl; |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
Loading…
Reference in new issue