elementUi上传视频组件

背景

vue+element后台管理系统中的表单提交中需要上传视频，利用饿了吗组件可以这么搞。
要求：

文件上传之前需要处理：
限制视频格式
限制视频大小
限制视频时长

实现代码：

HTML
说明：
action 必选参数，上传的地址 string
before-upload 上传文件之前的钩子 function(file)
on-progress 文件上传时的钩子 function(event, file, fileList)
http-request 覆盖默认的上传行为，可以自定义上传的实现 function

<template><div><el-uploadclass="avatar-uploader el-upload--text"action="":show-file-list="false":before-upload="beforeUploadVideo":on-progress="uploadVideoProcess"style="border: 1px solid #DCDFE6;border-radius: 4px;padding: 10px;"><video v-if="videoSrc !='' && progressFlag == false" :src="videoSrc" class="avatar" controls="controls">您的浏览器不支持视频播放</video><i v-else-if="videoSrc =='' && progressFlag == false" class="el-icon-plus avatar-uploader-icon" /><el-progress v-if="progressFlag == true" type="circle" :percentage="loadProgress" style="margin-top:30px;" /><div slot="tip" class="el-upload__tip" style="color: #E6A23C;"> 请保证视频格式正确，且不超过10M。</div></el-upload></div>
</template></div>
</template>

JS

<script>
import { uploadImg } from '@/api/common/index'
export default {data() {return {progressFlag: false, // 关闭进度条loadProgress: 0, // 进度条初始值videoSrc: ''}},methods: {// 进度条uploadVideoProcess(event, file, fileList) {this.loadProgress = Math.floor(event.percent)if (this.loadProgress >= 100) {this.loadProgress = 100// setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条}},// 文件上传之前做处理beforeUploadVideo(file) {const isLt10M = file.size / 1024 / 1024 < 10if (['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}// 获取视频时长var url = URL.createObjectURL(file)var audioElement = new Audio(url)var durationaudioElement.addEventListener('loadedmetadata', function(_event) {duration = audioElement.duration // 时长为秒，小数，182.36this.$parent.$data.wDuration = parseInt(duration)console.log(duration)})new Promise(function(resolve, reject) {const _URL = window.URL || window.webkitURLconst videoElement = document.createElement('video')// 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。videoElement.addEventListener('loadedmetadata', function(_event) {const duration = videoElement.duration // 视频时长const valid = Math.floor(duration) <= 4valid ? resolve() : reject()})videoElement.src = _URL.createObjectURL(file)}).then(() => {this.uploadImg(file) // 调用上传接口}, () => {this.$message.error('上传的视频时长过大，请重新上传')return Promise.reject()})},// 上传接口async uploadImg(file) {this.progressFlag = true // 显示进度条const fd = new FormData()fd.append('file', file)uploadImg(fd).then(response => {this.videoSrc = response.result.urlthis.progressFlag = falsethis.$emit('setFileSrc', this.videoSrc)this.$message({type: 'success',message: '上传成功!'})})}}
}
</script>

CSS

<style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>

工作之余用博客记录自己希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见

elementUi上传视频组件相关推荐

vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口（前后端代码版）...
记录时间 2020年10月27日 22点38分前言在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
vant weapp 多选上传图片_使用vant组件upLoad上传视频或图片
使用vant的uploader 组件上传视频或图片, /* 预先浏览显示 */ :key="v" @click="delImg(v)" class=" ...
elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)
博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的.索性就改进了下,把静态资源尽量放到云存储中,方便后续开发.这里把方法和遇到坑给记录下. 1.使用前提注 ...
html 前端优化上传视频,前端上传组件Plupload使用---上传大视频(分片上传)
上传视频到服务器 1.引入js插件: 2.html页面如图: 上传视频: 上传视频支持AVI.wma.rmvb.rm.flash.mp4.mid.3GP等格式 3.js代码 $(function ( ...
elementui实现上传视频功能+预览
没有见过的奇葩上传视频功能,或不多说直接上代码 html: <el-form-item label="图片上传" prop="imgUrl">< ...
vue-quill-editor图片大小的编辑，拖拽，上传视频
vue-quill-editor图片大小的编辑,拖拽,上传视频在vue组件中注册和使用 <quill-editor v-model="formInline.viewConfig&qu ...
vue 上传视频到腾讯云存储并获取视频第一帧
官网文档链接:https://cloud.tencent.com/document/product/436/6268 需求项目里之前上传视频是调后端接口,接口将视频保存到服务器,然后返回视频链接. ...
WangEdit富文本编辑器增加上传视频功能
乘着今天中午的时间对以前项目的一个需求进行一定的处理前天去了甲方公司接到了了一个新的需求就是可以把项目的一个富文本的编辑器可以设置为能够上传视频于是乎就要对vue里面的这个组件进行操作了 ...

elementUi上传视频组件

背景

实现代码：

elementUi上传视频组件相关推荐

最新文章

热门文章