VUE+element上传视频

效果展示

html部分

 <el-form-item label="视频上传" prop="storageurl"><!-- action必选参数, 上传的地址 --><el-uploadclass="avatar-uploader el-upload--text"action="上传视频的后台地址":show-file-list="false":on-success="handleVideoSuccess":before-upload="beforeUploadVideo":on-progress="uploadVideoProcess"><videov-if="videoForm.storageurl != '' && videoFlag == false":src="videoForm.storageurl"class="avatar"controls="controls">您的浏览器不支持视频播放</video><iv-else-if="videoForm.storageurl == '' && videoFlag == false"class="el-icon-plus avatar-uploader-icon"></i><el-progressv-if="videoFlag == true"type="circle":percentage="videoUploadPercent"style="margin-top:30px;"></el-progress></el-upload></el-form-item>

js部分

data() {return{videoForm: {storageurl: // 视频地址
}
},// 验证视频格式beforeUploadVideo(file) {if (['video/mp4','video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) === -1) {this.$message.error('请上传正确的视频格式')return false}},// 上传进度显示uploadVideoProcess(event, file, fileList) {console.log(event.percent, file, fileList)this.videoFlag = truethis.videoUploadPercent = Math.floor(event.percent)},// 获取上传图片地址handleVideoSuccess(res, file) {this.videoFlag = falsethis.videoUploadPercent = 0if (res.status === 200) {console.log(res.data)this.videoForm.storageurl = res.data} else {this.$message.error('视频上传失败，请重新上传！')}},

style部分

.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;
}

VUE+element 上传视频相关推荐

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 直接上传视频到阿里云oss
1.安装oss npm install ali-oss --save 2.在src下的util文件创建utils.js工具类 /*** 时间日期格式化* @param format* @returns ...
vue element上传额外参数
element upload组件上传额外参数有两种办法: 1.element的upload组件有个附带的属性是data可用于传递额外参数用这个自带的属性来传递时,后端可以用request来获取,如下 ...
vue element-upload上传视频或音频获取视频时长
做这步操作主要是后端要求传视频的时长duration这个字段,获取方法第一种: <el-upload class="upload-demo":multiple=" ...
vue+element上传多张图片和图片展示
前端: 文件上传使用el-upload <el-upload:http-request="uploadProductPic"accept="image/*" ...
Vue+element ui 上传视频
直接上代码 (利用了阿里云浏览器直传方式) <el-form-item label="视频:" :label-width="formLabelWidth" ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...

VUE+element 上传视频

VUE+element上传视频

效果展示

html部分

js部分

style部分

VUE+element 上传视频相关推荐

最新文章

热门文章