新建video-upload.vue文件：
<template>
<div class="video-upload-com">
<el-upload :action="uploadUrl" :before-upload="beforeAvatarUpload" :file-list="mediaList" :on-success="handleSuccess" :on-exceed="exceedTips" :limit="1" :on-remove="handleRemove">
<el-button size="mini" type="primary">点击上传视频</el-button>
<p v-if="tips" slot="tip" class="el-upload__tip">{{tips}}</p>
</el-upload>
<div v-if="mediaList&&mediaList[0]&&mediaList[0].url">
<video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls">您的浏览器不支持视频播放</video>
</div>
</div>
</template>
<script>
export default {
name: 'VideoUpload',
componentName: 'VideoUpload',
data () {
return {
mediaUrl: null,
mediaList: [],
uploadUrl: null,
playTime: 0,
videoSize: 0,
videoWidth: 0,
videoHeight: 0
}
},
props: {
value: {
type: Array,
default: () => [
]
},
tips: {
type: String,
default: '仅支持上传mp4或者MP4文件（限制50M以内）'
},
limitSize: {
type: Number,
default: 50
},
busiType: {
type: Number,
default: 2
}
},
components: {},
created () {
this.uploadUrl = `xxx` // 上传接口url地址
if (this.value) {
this.mediaList = this.value
}
},
watch: {
value (val) {
this.mediaList = this.value
}
},
mounted () {
},
methods: {
exceedTips (file, fileList) {
this.$message(`最多上传${fileList.length}个文件！`)
},
// 移除分享图片
handleRemove (file, fileList) {
this.mediaList = []
this.$emit('input', [])
},
handleSuccess (res, file, fileList) {
if (res.code === 100) {
const arr = res.result[0]
this.mediaUrl = arr.url
this.$emit('input', [{
id: arr.id,
url: arr.url,
name: arr.fileName,
playTime: this.playTime,
size: this.videoSize,
width: this.videoWidth,
height: this.videoHeight
}])
this.mediaList = fileList
// console.log('handleSuccess', this.mediaList, this.playTime, this.videoWidth, this.videoHeight)
} else {
this.mediaUrl = ''
this.mediaList = []
this.$message.error(res.desc ? res.desc : res.mobBaseRes.desc)
}
},
beforeAvatarUpload (file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg === 'mp4' || testmsg === 'MP4'
const size = file.size / 1024 / 1024
this.videoSize = size
const isLimitM = size < this.limitSize
if (!extension) {
this.$message.error('视频格式不正确，仅支持 mp4')
}
if (!isLimitM) {
this.$message.error(`上传视频大小不能超过${this.limitSize}MB!`)
}
if (extension && isLimitM) {
// 获取视频时长
const videoUrl = URL.createObjectURL(file)
const videoObj = document.createElement('video')
videoObj.onloadedmetadata = () => {
URL.revokeObjectURL(videoUrl)
// console.log('当前视频长度', videoObj.duration, videoObj.videoWidth, videoObj.videoHeight)
this.playTime = videoObj.duration // 视频时长
this.videoWidth = videoObj.videoWidth // 视频宽度
this.videoHeight = videoObj.videoHeight // 视频高度
// 执行上传的方法，获取外网路径，上传进度等
// resolve(videoObj)
}
videoObj.src = videoUrl
videoObj.load()
}
// 获取文件大小
return isLimitM && extension
}
}
}
</script>
<style lang='less'>
.video-upload-com {
.video .el-upload-list {
width: 326px;
padding-left: 157px;
}
.el-upload-list__item {
margin: 0 8px 0 0;
}
.el-upload-list__item-status-label {
right: -24px;
line-height: 0px;
// text-align: left;
i {
position: relative;
top: 0px;
left: -6px;
}
}
}
</style>
然后，在需要上传视频的页面，引入组件直接使用即可：
<template>
<div>
<video-upload v-model="mediaList"></video-upload>
</div>
</template>
<script>
import VideoUpload from '@/components/video-upload'
export default {
name: 'addvidart',
components: {
VideoUpload
},
data () {
return {
mediaList: [
{
name: '',
playTime: 0,
url: 'https://xxx' // 图片地址
}
]
}
},
props: {
},
watch: {
},
created () {
},
mounted () {
},
methods: {
}
}
</script>
参考文章：http://blog.ncmem.com/wordpress/2023/10/10/vue-%e5%9f%ba%e4%ba%8e-el-upload-%e5%b0%81%e8%a3%85%e8%a7%86%e9%a2%91%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6/
欢迎入群一起讨论
