vue 视频上传el-upload
vue 视频上传采用element-ui视频上传组件el-upload<el-upload class="avatar-uploader el-upload--text":action="uploadUrl" //上传地址:show-file-list="false"accept=".mp4"
·
vue 视频上传
采用element-ui视频上传组件el-upload
<el-upload class="avatar-uploader el-upload--text"
:action="uploadUrl" //上传地址
:show-file-list="false"
accept=".mp4" //接受文件类型
:on-success="handleVideoSuccess" //上传成功回调
:before-upload="beforeUploadVideo" //上传前回调
:on-progress="uploadVideoProcess"> //进度条回调
<video v-if="videoPath !='' && !videoFlag"
//变量videoPath如果不存在,就不显示,存在就显示视频
:src="videoPath" //你的视频路径(后台获取的)
class="avatar video-avatar"
controls="controls">您的浏览器不支持视频播放</video>
//变量videoPath如果不存在,就不显示,存在就显示视频
<i v-else-if="videoPath =='' && !videoFlag"
class="el-icon-plus avatar-uploader-icon"></i>
<el-progress v-if="videoFlag == true"
type="circle"
:percentage="videoUploadPercent"
style="margin-top:30px;"></el-progress>
<el-button class="video-btn"
slot="trigger"
size="small"
v-if="isShowUploadVideo"
type="primary">选取文件</el-button>
</el-upload>
<P v-if="isShowUploadVideo"
class="text">请保证视频格式正确,且不超过20M</P>
//初始化参数
data(){
uploadUrl:"",//你要上传视频到你后台的地址
videoFlag:false , //是否显示进度条
videoUploadPercent:"", //进度条的进度,
isShowUploadVideo:false, //显示上传按钮
videoPath:"" //视频地址
}
//上传前回调
beforeUploadVideo (file) {
//上传文件的大小
const isLt20M = file.size / 1024 / 1024 < 20;
//'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb','video/mp4' 可支持上传的视频类型
if (['video/mp4'].indexOf(file.type) == -1) {
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt20M) {
this.$message.error('上传视频大小不能超过20MB哦!');
return false;
}
this.isShowUploadVideo = false;
},
//进度条
uploadVideoProcess (event, file, fileList) {
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0) * 1;
},
//上传成功回调
handleVideoSuccess (res, file) {
this.isShowUploadVideo = true;
this.videoFlag = false;
this.videoUploadPercent = 0;
if (res.errorCode == "00") {
//res.sprbody.urlAddress 后台返回的上传视频的地址,具体情况视自己代码定
this.videoPath = res.sprbody.urlAddress;
// this.videoForm.showVideoPath = res.data.uploadUrl;
} else {
this.$message.error('视频上传失败,请重新上传!');
}
},
//样式
.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: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.video-avatar {
width: 400px;
height: 200px;
}
更多推荐
已为社区贡献3条内容
所有评论(0)