视频上传，可以限制大小

HTML:

<template>
<div class="video-box">
  <div class="space-header">
    <img @click="goBack()" class="left" src="../../../../images/icon_fanhui_daohang@2x.png" alt="图片不显示">
    <span class="title-kj">视频上传</span>
    <span class="right" @click="save">保存</span>
  </div>
  <div class="video-main">
    <div class="main">
    <div class="add-video" v-show="add">
      <span>添加视频</span>
      <div class="addd" @click="upload">
        <div></div>
        <div></div>
      </div> 
    </div>
    <div class="video" v-show="have">
      <video :src=vide controls="controls" preload="auto"></video>
     <!--  <video src="../../../../video/media1.mp4" controls="controls" preload="auto"></video> -->
   </div>
    <div class="delete" @click="dele"><img src="../../../../images/del.png"> </div>
    </div>
  </div>
 <!--提示-->
    <div v-show="meaning">
    <div class="css" >图片不能为空</div>
    </div>
</div>
</template>

上传前：

上传后

<script>
    export default {
      data() {
        return{
          meaning:false,
          vide:'',
          add:true,
          have:false,
          path:''
        }
      },
       mounted() {
       var that = this;

//text1（）后台的http地址
      var http = this.text1()
       
       // 视频展示
      this.$http.get(获取视频接口, {
     }).then(response => {
      that.vide =that.text1()+response.data.data.path
        if(that.vide!=""){
          that.add=false
          that.have=true
        }

     })
         
        },
      methods:{
        goBack(){
          this.$router.go(-1)
        },

//点击删除图片
        dele:function(){
          this.add=true
          this.vide=""
          this.have=false
        },
       
      upload:function () {
// 点击弹出选择框
        api.actionSheet({
          cancelTitle :'取消',
          buttons : ['手机相册']
        }, function(ret, err) {
          if (ret) {
            // 调用拍照功能
            getPicture(ret.buttonIndex);
          }
        });

        let that=this;
        let thathttp=this.$http

       
        function getPicture(sourceType) {
          // 1为从相册选择
           if (sourceType == 1) {
            // 从相册里选择视频
            var UIMediaScanner = api.require('UIMediaScanner');
            UIMediaScanner.open({
              type : 'video',
              column : 3,
              classify : true,
              max : 1,
              sort : {
                key : 'time',
                order : 'desc'
              },
              texts : {
                stateText : '已选择*项',
                cancelText : '取消',
                finishText : '完成'
              },
              styles : {
                bg : '#fff',
                mark : {
                  icon : '',
                  position : 'bottom_left',
                  size : 20
                },
                nav : {
                  bg : '#eee',
                  stateColor : '#000',
                  stateSize : 18,
                  cancelBg : 'rgba(0,0,0,0)',
                  cancelColor : '#000',
                  cancelSize : 18,
                  finishBg : 'rgba(0,0,0,0)',
                  finishColor : '#000',
                  finishSize : 18
                }
              },
              scrollToBottom : {
                intervalTime : -1,
                anim : true
              },
              exchange : true,
              rotation : true
            }, function(ret) {
              if (ret) {
                that.path=ret
                that.wei=JSON.stringify(ret.list)
                var path=ret.list[0].path;
                var UIMediaScanner = api.require('UIMediaScanner');
                UIMediaScanner.getVideoDuration({
                  path:path,

//限制时长
                  duration:60
        }, function(ret, err) {
           let thathttp=this.$http

            if (ret) {
                    // ret弹出视频的时长，1比1000；
                    // alert(1)
                    // alert(JSON.stringify(ret));
                    if(ret>60000){
                      alert(JSON.stringify("视频大于x分钟，无法上传"));
                    }else{
                      alert(2)
                        // 显示视频
                      that.add=false;
                      that.have=true;
                      // alert(JSON.stringify(path));
                      that.vide=path
                      // alert(JSON.stringify(that.vide));
                    }
                   
                  } else {
                    // alert(3)
                    alert(JSON.stringify(err));
                  }
        })
                

              }
            });
          }}
      },
     
   //点击保存按钮   
    save:function(){
        let thathttp=this.$http
        var that=this;
        if(that.vide==""){
         //提示图片为空
        }
 // 上传图片
            // 下面video参数名字前后端一致
            api.ajax({
              method:"post",
              url:传入接口,
              data:{
                files: {
                  video:that.vide
                }
              },
              dataType:'json',
              async:true,
            },function(ret,err){
              if(ret.code==200){
               // alert(1)
               //  alert(JSON.stringify(that.vide));
                that.$router.push('/index')
              }else {
                // alert(2)
                alert(JSON.stringify(err));
            }
        })
      }

  
     

    }
  }
</script>

样式
<style scoped>
.css{
   position: absolute;
    left: 0.37rem;
    top: 2.2rem;
    font-size: 0.22rem;
    height: 1rem;
    width: 3rem;
    background: #fff;
    border: .01rem solid #00B2F0;
    border-radius: 0.04rem;
    text-align: center;
    line-height:1rem;
    z-index: 100;
  }
  #box{
    width: 100%;
    height: 0.5rem;
    position: fixed;
    bottom:0;
    left: 0;
    text-align: center;
    font-size: 0.14rem;
    z-index: 200;
    background: #3ABA63;
    line-height: 0.5rem;
  }


  .video-box{
    width: 100%;
    height: 100%;
    /*display: flex;*/
    min-height: 100vh;
    background-color: #F7F7F7;
  }
  /*头部样式*/
  .space-header{
    font-size: 0;
    position:fixed;
    top: 0;
    width: 100%;
    height:.49rem;
    line-height: .49rem;
    vertical-align: middle;
    text-align: center;
    background-color:#44b6e2 ;
    z-index: 999;
    color: #ffffff;
  }
  .space-header .title-kj{
    font-size: .16rem;
    height: .21rem;
    font-weight: bold;
  }
  .space-header .left{
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    left: .12rem;
    width: .09rem;
    height: .15rem;
  }
  .space-header .right{
    font-size: 0.14rem;
    float: right;
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    right: .12rem;
    color: #ffffff;
  }
  /*main样式*/
  .video-main{
    padding-top: 0.55rem;
  }
  .main{
     background-color: #FFFFFF;
  }
  .video-main .add-video{
    font-size: 0.14rem;
  }
  .add-video span{
    padding-left: 0.12rem;
    display: inline-block;
    margin-top: 0.1rem;
  }
  .addd{
    box-sizing: border-box;
    width: 94%;
    height: 2rem;
    border: 0.01rem solid black;
    margin-top: 0.1rem;
    position: relative;
    margin-left: 3%;
  }
  .addd div:nth-child(1){
    width: 0.15rem;
    height: 0.6rem;
    background: black;
    margin: 0.7rem auto;
    border-radius: 0.1rem;
  }
  .addd div:nth-child(2) {
    width: 0.6rem;
    height: 0.15rem;
    background: black;
    position: absolute;
    left: 1.46rem;
    top: 0.93rem;
    border-radius: 0.1rem;
  }
  .delete{
    width: 100%;
    height: .35rem;
    background: #ffffff;
  }
  .delete img{
    margin: .12rem 0;
    margin-left: 93%;
  }
  .video video{
    margin-top: .12rem;
     width: 94%;
    height: 2rem;
    margin-left: 3%;
  }
</style>