You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.8 KiB
102 lines
2.8 KiB
2 years ago
|
<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>
|
||
|
|
</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){
|
||
|
|
|
||
|
|
const res:any = uploadFile.response;
|
||
|
|
const resd = res.data;
|
||
|
|
const resdurl = resd.url;
|
||
|
|
videoResource.value = resdurl;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|