element ui视频上传(已上线,拿去即用)
Posted 欧阳呀
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element ui视频上传(已上线,拿去即用)相关的知识,希望对你有一定的参考价值。
element ui视频上传 + 进度条实现(拿去即用)
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>
- 加了很多注释,相信大家问题不大了,有问题可以加主页的群
1. 希望本文能对大家有所帮助,如有错误,敬请指出
2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)
以上是关于element ui视频上传(已上线,拿去即用)的主要内容,如果未能解决你的问题,请参考以下文章