<template>
|
<div>
|
<el-upload
|
ref="refUploadVideo"
|
action="#"
|
:before-upload="beforeUploadVideo"
|
accept="video/mp4"
|
:limit="1"
|
:file-list="uploadVideos"
|
:on-change="addUploadImg"
|
:on-remove="delUploadImg"
|
:http-request="reqUploadVideo"
|
style="width: 200px"
|
>
|
<video
|
v-if="uploadVideos.length"
|
class="com-up-video"
|
:src="uploadVideos[0].url"
|
controls="controls"
|
>您的浏览器不支持视频播放</video>
|
<template v-else>
|
<i class="el-icon-plus" />
|
<span>选择视频</span>
|
</template>
|
|
</el-upload>
|
</div>
|
</template>
|
|
<script>
|
import mixin_upload from '@/mixins/upload.js' // 通用上传视频预览
|
export default {
|
mixins: [mixin_upload],
|
model: {
|
prop: 'uploadVideos',
|
event: 'change'
|
},
|
props: {
|
uploadVideos: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
accept: {
|
type: String,
|
default: () => {
|
return 'image/jpeg,image/jpg,image/gif,image/png'
|
}
|
}
|
|
},
|
|
data() {
|
return {
|
callback: null
|
}
|
},
|
methods: {
|
// 上传视频 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
// 上传前回调
|
beforeUploadVideo(file) {
|
var fileSize = file.size / 1024 / 1024 < 50
|
if (['video/mp4'].indexOf(file.type) === -1) {
|
this.$message.error('必须是mp4文件')
|
return false
|
}
|
if (!fileSize) {
|
this.$message.error('视频大小不能超过50MB')
|
return false
|
}
|
this.isShowUploadVideo = false
|
},
|
// 增加视频
|
addUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
// 删除视频
|
delUploadImg(file, fileList) {
|
this.$emit('change', fileList)
|
},
|
|
// 上传视频
|
reqUploadVideo(res) {
|
const file = res.file
|
const formData = new FormData()
|
formData.append('file', file)
|
this.postFN({
|
url: 'admin/image/upload?type=1',
|
header: { 'Content-Type': 'multipart/form-data' },
|
params: formData,
|
mockData: {
|
code: 100,
|
msg: '',
|
data: {
|
imgUrl: 'https://www.w3school.com.cn/i/movie.mp4'
|
}
|
}
|
}, (inf) => {
|
// 替换掉未上传的图片
|
this.$emit('change', [{ name: '视频', url: inf.imgUrl, status: 'success' }])
|
|
console.log('上传视频成功且结束')
|
|
// 提交
|
// this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
|
this.callback && this.callback(inf.imgUrl)
|
})
|
}
|
// 上传视频 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
}
|
}
|
</script>
|
|
<style>
|
.el-upload-list__item{
|
transition: none;
|
}
|
</style>
|
