element UI el-upload组件实现视频文件上传视频回显

项目中需要提供一个视频介绍，使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示，后台提供视频上传API并返回URL，百度找了一番后最终实现了。

HTML

<el-uploadclass="avatar-uploader"action=""    //上传地址v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }" //可删除v-bind:on-progress="uploadVideoProcess"v-bind:on-success="handleVideoSuccess"v-bind:before-upload="beforeUploadVideo"v-bind:show-file-list="false":headers="headers"   //头部携带的token 非必须><videov-if="videoForm.showVideoPath != '' && !videoFlag"v-bind:src="videoForm.showVideoPath"   //上传后回显的地方class="avatar video-avatar"controls="controls">您的浏览器不支持视频播放</video><i v-else-if="videoForm.showVideoPath == '' && !videoFlag" //i标签是上传前的那个+上传后隐藏class="el-icon-plus avatar-uploader-icon"></i><el-progress v-if="videoFlag == true" type="circle"v-bind:percentage="videoUploadPercent"style="margin-top: 7px"></el-progress></el-upload>

 //上传前回调beforeUploadVideo(file) {var fileSize = file.size / 1024 / 1024 < 50;   //控制大小  修改50的值即可if (["video/mp4","video/ogg","video/flv","video/avi","video/wmv","video/rmvb","video/mov",].indexOf(file.type) == -1     //控制格式) {layer.msg("请上传正确的视频格式");return false;}if (!fileSize) {layer.msg("视频大小不能超过50MB");return false;}this.isShowUploadVideo = false;},//进度条uploadVideoProcess(event, file, fileList) {    //注意在data中添加对应的变量名this.videoFlag = true;  this.videoUploadPercent = file.percentage.toFixed(0) * 1;},//上传成功回调handleVideoSuccess(res, file) {this.isShowUploadVideo = true;this.videoFlag = false;this.videoUploadPercent = 0;console.log(res);//后台上传数据if (res.success == true) {  this.videoForm.showVideoPath = res.data.url;    //上传成功后端返回视频地址 回显} else {this.$message.error("上传失败！");}},

data

      videoFlag: false,//是否显示进度条videoUploadPercent: "",//进度条的进度，isShowUploadVideo: false,//显示上传按钮videoForm: {showVideoPath: "",  //回显的变量},

css

.avatar-uploader-icon {border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {border: 1px dashed #d9d9d9 !important;border-radius: 6px !important;position: relative !important;overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {border: 1px dashed #d9d9d9 !important;border-color: #409eff;
}
.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 300px;height: 178px;line-height: 178px;text-align: center;
}
.avatar {width: 300px;height: 178px;display: block;
}

成功后的截图

完美！

element UI el-upload组件实现视频文件上传视频回显相关推荐

bootstrap fileinput 文件上传和回显
官网下载文件http://plugins.krajee.com/file-input/demo bootstrap fileinput 是基于bootstrap基础上的上传插件,so必要的bootst ...
Spring Boot文件上传及回显（单/多文件）
一.单文件上传 1.前端页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
vue2 + elementui el-upload文件上传后回显及重新提交思路
回显: :file-list="fileList" 可用于预览图片列表,数组内的对象格式为{name: '', url:"'}. 文件上传后,需让后端返回文件标识和服务器 ...
Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
upload组件多个文件上传、自定义文件列表显示及手动上传
1.多个上传和上传单个 1)由 multiple属性来控制 2)保存state时,注意存的List内容即可 //参数 uploadProps={name:'file', //接口入参名accept: ...
springboot实现简单的文件上传与回显
前端页面 input的file类型可以将上传文件的绝对路径返回给后台. <!DOCTYPE html> <html lang="en" xmlns:th=&quo ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

element UI el-upload组件实现视频文件上传视频回显

element UI el-upload组件实现视频文件上传视频回显相关推荐

最新文章

热门文章