element ui的upload上传视频内容

正好自己在做一个项目，然后用到了上传视频的内容，但是element ui默认的上传内容是图片，所以要把它改成视频只需要一点改变就行，

<el-upload class="avatar-uploader":action="uploadUrl":show-file-list="false":on-success="handleVideoSuccess":on-progress="uploadVideoProcess":before-upload="beforeUploadVideo"><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>

上面是样式的内容，然后还要进行一些before-upload上传之前的验证，on-progress上传进度，on-success上传成功后的内容

videoForm:{Video:'',videoUploadPercent:'',videoUploadId:'',},videoFlag:false,
uploadUrl: "http://localhost:3000/admin/upload", //你要上传视频到你后台的地址

上面这个是data里面的基本数据，下面是验证，进度，上传后操作

uploadVideoProcess(event, file, fileList){this.videoFlag = true;this.videoUploadPercent = parseInt(file.percentage.toFixed(0))},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;}}//上传成功方法handleVideoSuccess(res, file) {this.videoFlag = false;this.videoUploadPercent = 0;this.videoForm.videoUploadId = res.filenamethis.videoForm.Video = res.url;},

这些主要是前台内容的验证，后台服务器我用的是node，所以我把node的相关内容也放在下面，主要有一个uploads文件夹用来存放上传的视频内容，这个http://localhost:3000/admin/upload就是请求的地址，然后下载一个multer用来解析文件，将文件存入uploads内，将文件信息发送到前端然后就能通过传的url来进行访问这个视频，但是要记住把存视频的文件夹暴露出去，否则会出现404的错误，找不到内容

const multer =require('multer')const upload = multer({ dest: __dirname + '/../uploads' })
app.post('/admin/upload',upload.single('file'),async(req,res)=>{const file = req.filefile.url = `http://localhost:3000/uploads/${file.filename}`res.send(file)})

这就是这视频上传的基本内容了。

element ui的upload上传视频内容相关推荐

upload上传视频
众所周知,element ui里面的上传组件并没有上传视频功能,即使上传成功,也不支持在线预览,so我找到了一份比较好的源码,供大家参考及自己以后使用. <el-upload ref=" ...
iOS图片，视频上传视频内容旋转
#前言我最近在接手一个智能盒子的iOS应用,上面有一个功能是这样的.把你本地的照片和视频可以甩屏到你绑定的盒子上. 我的上一位前辈做的时候必须要求再同一个局域网,但是当我做的时候要求不同的局域网也要 ...
vant weapp 多选上传图片_使用vant组件upLoad上传视频或图片
使用vant的uploader 组件上传视频或图片, /* 预先浏览显示 */ :key="v" @click="delImg(v)" class=" ...
自定义Element ui中el-upload上传后的文件图标
实现功能:上传图标显示图片图标,上传文件显示文档图标,上传视频显示视频图标首先想到的是去Element UI 查看有没有自定义的功能,后面发现底层源码写死的,那就不能自定义,就只能通过js操作了,我 ...
element ui用户头像上传
2019独角兽企业重金招聘Python工程师标准>>> 官方例子会出现如果更换多次头像的话,就会上传多次. 当使用手动上传时候,会出现如果点击更换头像3次的话,上传时候会将3次更换的 ...
element ui实现自定义上传文件-以及解决已上传文件列表消失问题
自定义上传按钮,非自动上传,效果图 action - 就是上传的接口地址 accept - 是限制上传文件格式,设置后只能上传该格式文件, 选取-选取按钮只是选择了文件 ,但是并没有上传若要点击上传 ...
阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案
1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
1.自定义布局查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: ...
手机优酷APP怎么上传视频
手机优酷怎样视频上传,自身在日常生活拍到好玩的视频,我们可以上传优酷,那如何上传到优酷呢? 01. 在优酷首页,点一下提交按键. 手机优酷APP怎么上传视频 02. 随后登录自身的优酷视频帐户. 手机 ...
php 编辑器插入视频,织梦dedecms默认编辑器实现上传视频功能
织梦默认的编辑器采用的是ckeditor厂商提供的,只可以上传Flash,今天我们进行二次改进,使之可以上传视频文件如MP4文件进行播放,方法比较简单,无需去更换编辑器,下面就言归正传. 第一步:后台 ...

element ui的upload上传视频内容

element ui的upload上传视频内容相关推荐

最新文章

热门文章