其他分享
首页 > 其他分享> > 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

作者:互联网

实现效果:

上传中:

 

 

 

上传完成:

 

 

 

代码:

<el-form-item label="视频上传" prop="Video">
<!-- action必选参数, 上传的地址 -->
<el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
<video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
<i v-else-if="videoForm.Video =='' && videoFlag == false" 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-upload>
<P class="text">请保证视频格式正确,且不超过10M</P>
</el-form-item>

on-success:上传成功

before-upload:验证

on-progress:上传进度

验证方法:验证视频格式和视频大小

 

beforeUploadVideo(file) {
const isLt10M = file.size / 1024 / 1024 < 10;
if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt10M) {
this.$message.error('上传视频大小不能超过10MB哦!');
return false;
}
},
上传进度显示:

 

uploadVideoProcess(event, file, fileList){
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0);
},
file.percentage获取文件上传进度

进度显示:

 

<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>

上传成功:

handleVideoSuccess(res, file) { //获取上传图片地址
this.videoFlag = false;
this.videoUploadPercent = 0;
if(res.status == 200){
this.videoForm.videoUploadId = res.data.uploadId;
this.videoForm.Video = res.data.uploadUrl;
}else{
this.$message.error('视频上传失败,请重新上传!');
}
},

视频显示是在上传成功后后台返回视频地址,直接显示在页面中的。

标签:el,视频,res,video,进度,file,视频文件,上传
来源: https://www.cnblogs.com/wuliujun521/p/15528138.html