使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
2018-06-29 11:38
3527 查看
实现效果:
上传中:
上传完成:
代码:
<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:上传进度
验证方法:验证视频格式和视频大小
[code]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; } },
上传进度显示:
[code]uploadVideoProcess(event, file, fileList){ this.videoFlag = true; this.videoUploadPercent = file.percentage.toFixed(0); },
file.percentage获取文件上传进度
进度显示:
[code]<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('视频上传失败,请重新上传!'); } },
视频显示是在上传成功后后台返回视频地址,直接显示在页面中的。
阅读更多
相关文章推荐
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 今天使用jspsmartupload.jar实现上传文件的功能,发现中文乱码,于是总结了下解决方法
- java使用smartupload组件实现文件上传的方法
- 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例
- java使用smartupload组件实现文件上传的方法
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 解决使用elementUI框架el-upload上传组件时session丢失问题
- vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
- ASP中文件上传组件ASPUpload介绍和使用方法
- html 使用Ajax 实现多文件上传,并显示进度
- 使用struts2和AJAX实现文件上传并显示进度条
- JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码
- java基于servlet使用组件smartUpload实现文件上传
- 在vue项目中使用element-ui的Upload上传组件
- 使用smartupload组件实现jsp+jdbc上传下载文件实例解析
- 使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态
- 实现NeatUpload大文件上传和个性显示进度条
- jquery uploadify 实现批量上传,带进度显示,判断文件大小
- 七牛云图片上传:使用element-ui的upload组件