elementui实现上传视频功能+预览组件

先上图

组件html部分

<template>
    <div>
        <div class="videoupload">
            <!-- action必选参数, 上传的地址 -->
            
          
            <el-upload
                class="avatar-uploader el-upload--text"
                :headers="headers"
                :disabled="tempSrc!='' && !isFactor && isFactorVideo"
                :action="action"
                :show-file-list="false"
                :on-success="handleVideoSuccess"
                :before-upload="beforeUploadVideo"
                :on-progress="uploadVideoProcess"
            >
                <i
                    v-if="!tempSrc && videoFlag == false"
                    class="el-icon-plus"
                    style="
                        display: flex;
                        margin-left: 300px;
                        font-size: 22px;
                        font-weight: bold;
                    "
                ></i>

                <div
                    style="position: relative; margin-top: -18px"
                    :style="{
                        visibility: tempSrc ? 'visible' : 'hidden'
                    }"
                >
                    <i
                        @click.stop="clearVideo"
                        v-if="isFactor || (!isFactor && !isFactorVideo)"
                        class="el-icon-circle-close"
                        style="
                            color: red;
                            font-size: 22px;
                            font-weight: bold;
                            top: 12px;
                            position: absolute;
                            right: -22px;
                        "
                    ></i>
                    <video
                        ref="videoPlay"
                        :src="src"
                        width="290"
                        height="190"
                        style="background-color: black"
                        controls="controls"
                    >
                        您的浏览器不支持视频播放
                    </video>
                </div>


            </el-upload>
        </div>
    </div>
</template>

组件js部分

<script>
import {Upload} from 'element-ui'
export default {
    props: {
        src: String,
        isFactor: {
            // 是否是厂商默认是
            type: Boolean,
            default: true
        },
        isFactorVideo: {
            // 视频是否是厂商的，默认是
            type: Boolean,
            default: true
        }
    },
    model: {
        prop: 'src',
        event: 'returnBack'
    },
    data() {
        return {
            action:
                window.SITE_CONFIG.baseUrl +
                '/sino-resource/oss/endpoint/put-file',
            headers: {
                'Sino-Auth': localStorage.getItem('Sino-Auth')
            },
            videoFlag: false,
            tempSrc: this.src
            // videoUploadPercent: 0
        }
    },
    methods: {
        clearVideo() {
            console.log('点击删除图标')
            this.tempSrc = ''
            this.$emit('returnBack', '')
        },
        handleVideoSuccess(res, file) {
            //获取上传文件地址
            console.log('res', res)
            this.videoFlag = false
            // this.videoUploadPercent = 0
            if (res.data?.link) {
                console.log('res.data.link', res.data.link)
                this.commonUpdateSrc(res.data.link)
                console.log('this.src', this.src)
            } else {
                this.$message.error('视频上传失败，请重新上传！')
            }
        },
        commonUpdateSrc(src) {
            //如果动态切换src地址，也要加上下面的事件（前提是src地址已切换或已重新赋值，再走这个事件）
            this.tempSrc = src
            this.$nextTick(() => {
                let videoRefs = this.$refs.videoPlay
                this.$emit('returnBack', src)
                videoRefs.src = src
                // videoRefs.play()
            })
        },
        uploadVideoProcess(event, file, fileList) {
            console.log(event.percent, file, fileList)
            this.videoFlag = true
            // this.videoUploadPercent = Math.floor(event.percent)
        },
        beforeUploadVideo(file) {
            const isLt40M = file.size / 1024 / 1024 <= 40
            if (['video/mp4'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式')
                return false
            }
            if (!isLt40M) {
                this.$message.error('上传视频大小不能超过40MB哦!')
                return false
            }
        }
    },
    components: {
        ElUpload: Upload
    }
}
</script>

组件css部分

<style lang="scss" scoped>
.videoupload {
    width: 290px;
    height: 168px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
}
.videoupload /deep/ .el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

使用组件

 <video-upload ref="videoUpload"  v-model="ruleForm.productVideo"/>

给组件默认赋值

 this.$refs.videoUpload.commonUpdateSrc(tempData.productVideo)

作者相关文章

反编译获取任何微信小程序源码——看这篇就够了

零成本，零基础搭建获利的影视小程序

零基础搭建智能垃圾分类小程序(可做毕设，可加入流量主，赚取零花钱)