vue+elementui上传视频并回显

之前上传视频我做的东西的话是没有办法看到视频的内容的，然后我们组长就说这个业务是不可以的，因为用户的话过了很久是会忘记自己这个视频是什么内容的，所以我们做一个上传视频的功能的话，是一定要一个回显，让用户可以看得到视频的内容。

那么我们可以用video标签来实现它

效果

vue部分

<el-form-itemlabel="上传视频"style="margin-top: 15px; width: 49%"class="labelcolor"prop="videoUrl"><el-upload:action="uploadFileUrl":before-upload="beforeUpload":on-success="handleUploadSuccess":on-progress="uploadVideoProcess":show-file-list="false"multiple:limit="1":on-exceed="handleExceed":file-list="fileList"class="avatar-uploader"id="avatar-uploader":disabled="isDisabled"><iclass="el-icon-circle-close"v-if="form.videoUrl != ''"@click="handleRemove"></i><div class="avatar-icon-box"><imgv-if="form.videoUrl == ''"class="avatar-icon imgess":src="require('@/assets/images/video-add.png')"style="align-items: center; vertical-align: middle"/><videov-else-if="form.videoUrl !== ''"v-bind:src="form.videoUrl"class="video-avatar":autoplay="true"controls="controls"mutedloop></video><el-progressv-if="videoFlag == true"type="circle"v-bind:percentage="videoUploadPercent"style="margin-top: 7px"></el-progress></div></el-upload></el-form-item>

js部分

export default{data() {uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",},methods {beforeUpload(file) {const isMp4 = file.type === "video/mp4/webm/mov/flv/ani/wmv/3gp/m4v/mkv";// 限制文件最大不能超过 50Mconst isLt50M = file.size / 1024 / 1024 < 50;if (!isMp4) {this.$message.error("视频只能是mp4格式!");}if (!isLt50M) {this.$message.error("上传头像图片大小不能超过 300MB!");}return isMp4 && isLt50M;},// 文件上传成功回调handleUploadSuccess(files) {console.log("upload success", files,this.fileList);if (files.code === 200) {const { data } = files;this.form.videoUrl = data.url;this.isDisabled = true}},//进度条uploadVideoProcess (event, file, fileList) {    //注意在data中添加对应的变量名this.videoFlag = truethis.videoUploadPercent = file.percentage.toFixed(0) * 1},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},// 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.open = false;this.upload.isUploading = false;clearTimeout(this.timer);this.$refs.upload.clearFiles();this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true,});this.getList();},//图片删除handleRemove(file, fileList) {this.isDisabled = trueconsole.log(this.isDisabled)this.$confirm(`确定移除视频？`).then(() => {this.form.videoUrl = ''this.fileList = []this.isDisabled = false}).catch(() => { })},beforeRemove(file) {return this.$confirm(`确定移除 ${file.name}？`);},}
}

css部分

.avatar-uploader {height: 280px;width: 400px;background-color: #313a69;border: 1px dashed #959bcb;border-radius: 8px;display: flex;align-items: center;justify-content: center;
}
.avatar-uploader:hover .el-icon-circle-close {visibility: visible;
}
.video-avatar {width: 400px;height: 250px;// position: absolute;// z-index: 99;
}
.el-icon-circle-close {display: flex;float: right;margin-right: 6px;color: #959bcb;font-size: 22px;visibility: hidden;
}

vue+elementui上传视频并回显相关推荐

若依框架（Ruoyi-vue）上传视频且回显
1.html 代码如下(示例): <template><el-uploadclass="avatar-uploader":action="uploadV ...
SpringBoot vue图片上传不能立即回显问题解决
最开始项目是放在eclipse之中的.springboot项目默认把静态的文件加载到classpath的目录下的.而此时我们上传的图片并没有传入启动了的项目当中去.所以明明路径是对的.却访问不了.在项 ...
VUE+element 上传视频
VUE+element上传视频效果展示 html部分 <el-form-item label="视频上传" prop="storageurl">& ...
Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...
Vue elementui 上传前获取图片宽度尺寸和大小
Vue elementui 上传前获取图片宽度尺寸和大小项目中用到elementui上传组件,但是on-change钩子函数中file参数只能拿到文件名字和大小, 如果是图片就拿不到图片的宽高,不符 ...
vue+elementui上传头像
vue+elementui上传头像 vue页面中: <el-form :model="form"><el-form-item label="路径&quo ...
上传头像并回显（SpringBoot）
以前经常写上传头像功能,上传头像完回显出来,通常套路是: 数据库保存文件名(自己加工过,防止重名) 然后文件路径写到前台的绝对路径.前台直接用../相对路径的方式显示出来. 但是这样有一个问题就是当我 ...
vue 获取上传视频的第一帧做为视频封面
上一篇文章记录了vue上传视频,接下来,需要在上传成功后截取视频第一帧做为视频封面. 截取视频第一帧具体实现如下: <template><div><div v-if=& ...
vue input上传视频以及图片
图片示例主要代码 1.把图片视频转成本地的地址在页面显示 getObjectURL(file) {var url = null;// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 ...
JS.VUE后台上传视频，文件格式修改，nacos配置
上传视频: 到nacos修改 application配置上传视频 16: name: aboutUsVideo mimeLimit: video/* **** ...

vue+elementui上传视频并回显

vue+elementui上传视频并回显相关推荐

最新文章

热门文章