vue+element上传视频加其他的参数
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-form-item label="添加视频" class="video-upload">
<el-upload
class="avatar-uploader"
action="接口地址"
accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb' //格式类型
:data="paramsdata" //其他参数
:show-file-list="false"
:before-upload="beforeUploadVideo" //用来判断大小
:on-success="handleVideoSuccess"
:on-progress="uploadVideoProcess"> //用来显示进度条
<video
v-if="Video !='' && videoFlag == false"
:src="Video"
width="350"
height="180"
controls="controls"
>您的浏览器不支持视频播放</video> //视频上传成功之后显示
<i
v-else-if="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>
</el-form-item>
data(){
return {
videoFlag:false, //刚开始的时候显示为flase
videoUploadPercent: '0%', //进度条刚开始的时候为0%
paramsdata:{
'参数': '参数值' //添加其他参数
}
}
}
beforeUploadVideo(file) { //视频上传之前判断他的大小
const isLt10M = file.size / 1024 / 1024 < 2000;
if (!isLt10M) {
this.$message.error('上传视频大小不能超过2000MB哦!');
return false;
}
},
uploadVideoProcess(event, file, fileList){ //视频上传的时候获取上传进度传给进度条
this.videoFlag = true;
this.videoUploadPercent = parseInt(file.percentage);
console.log(this.videoUploadPercent)
},
handleVideoSuccess(res, file) { //视频上传成功之后返回视频地址
this.videoFlag = false;
this.videoUploadPercent = 0;
console.log(res)
this.Video = res.data[0];
},
为了这个上传视频琢磨了好长时间。在网上找到东西。但是可能是因为少东西。所以总是错。现在记下来防止以后忘记。
献上两个地址
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)