1.template 部分
<template> <div class="editPage__video"> <div class="title">视频设置</div> <div class="img__con"> <el-upload class="avatar-uploader" :action="uploadImgUrl" :data="uploadImgData" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-progress="uploadVideoProcess" > <video width="100%" v-if="imageUrl" controls="controls" :key="menuKey"> <source :src="rightData.props.src" type="video/mp4" /> </video> <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> --> <i v-else class="el-icon-plus avatar-uploader-icon"></i> <el-progress v-if="videoFlag == true" type="line" :percentage="videoUploadPercent" style="margin-top: 30px" ></el-progress> </el-upload> <p> 说明: 视频格式为mp4格式，每个视频大小不超过300m </p> </div> </div> </template>
- 考虑到有些小伙伴不一定需要进度条，所以顺便说下怎么把它干掉，代码如下：
- 对应的变量和方案也干掉就是了
:on-progress="uploadVideoProcess" <el-progress v-if="videoFlag == true" type="line" :percentage="videoUploadPercent" style="margin-top: 30px" ></el-progress>
2. script 部分
- 在我的实际业务中，this.rightData是父级组件传过来的值，大家用的时候记得去掉，替换成自己的就成
data() { return { imageUrl: this.rightData.imageUrl, // 视频上传 uploadImgUrl: `${process.env.VUE_APP_BASE_API}/common-server/aliFile/upLoadVideo`, uploadImgData: { busiName: 32 }, // 应付多个组件的情况 记录当前组件的key值 componentKey: null, menuKey: 1, // 用来强制刷新 videoFlag: false, // 进度条相关的 videoUploadPercent: 0, // 进度条相关的 }; }, methods: { // 上传成功的函数 handleAvatarSuccess(res, file) { // 进度条恢复到初始状态 this.videoFlag = false; this.videoUploadPercent = 0; ++this.menuKey; // console.log(res) this.imageUrl = res.data.url; // 这里是向父级传值，不需要就去掉 this.$emit("childRightFn", { ...this.rightData, ...{ imageUrl: this.imageUrl }, ...{ props: { src: this.imageUrl } }, }); }, beforeAvatarUpload(file) { // file.type === "image/jpg" || // file.type === "image/png"; const isMp4 = file.type === "video/mp4"; // 限制文件最大不能超过 300M const isLt2M = file.size / 1024 / 1024 < 300; if (!isMp4) { this.$message.error("视频只能是mp4格式!"); } if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 300MB!"); } return isMp4 && isLt2M; }, //进度条 uploadVideoProcess(event, file, fileList) { this.videoFlag = true; this.videoUploadPercent = parseInt(file.percentage); }, }
- 有个东西重点说一下：menuKey
++this.menuKey;
- 如果video的src发生变化，预览是不会变化的
- 所以给此标签加了唯一的key值，每次上传成功key都会变化，让其强制刷新
3. scss 部分
- 这里也请大家按需取用，不需要删掉就是，不要原封不动的搬
<style lang="scss" scoped> .editPage__video { .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 16px; color: #8c939d; width: 350px; height: 30px; line-height: 30px; text-align: center; } .avatar { width: 350px; height: auto; display: block; } .title { font-size: 18px; margin-bottom: 20px; } .img__con { .el-button { width: 100%; margin: 10px 0 20px 0; } } } </style>
