3 changed files with 83 additions and 443 deletions
@ -1,102 +1,12 @@ |
|||||
<template> |
<template> |
||||
<el-upload |
<video :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></video> |
||||
: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> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<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); |
|
||||
|
|
||||
} |
import uselowcodevideoStore from '@/store/modules/lowcodevideo' |
||||
//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src |
const lowcodevideoStore = uselowcodevideoStore(); |
||||
function selectVideo(uploadFile: UploadFile){ |
|
||||
|
|
||||
const res:any = uploadFile.response; |
|
||||
const resd = res.data; |
|
||||
const resdurl = resd.url; |
|
||||
videoResource.value = resdurl; |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<style scoped></style> |
<style scoped></style> |
||||
Loading…
Reference in new issue