<p>请选择或者拍摄视频上传</p>

  <input type="file" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf" capture="camcorder" @change="onFileChange" style="display: none;">

    <video ref="video" controls="controls"></video>
      <div style="padding: 20px;text-align: center">
      <yd-progressbar type="line" :progress="videoProgress" trail-width="4" trail-color="#FE5D51"></yd-progressbar>
      <p>{{videoProgress*100}}%</p>

      </div>

    <yd-button style="width: 30%;margin-left: 10%" bgcolor="#09c69c" color="#fff" shape="circle" @click.native="complete" action-type="button">确认上传</yd-button>

onFileChange: function (e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        //视频上传
        if(this.typeName == '视频'){
        let _this = this;

        //视频预览
        var reader = new FileReader();
        this.file = files[0];
        reader.onload = function () {
            _this.$refs.video.src = this.result;
        };
        reader.readAsDataURL(this.file);
        }
      },

//提交

complete(){

let _this = this;

if(this.typeName == '视频'){

      let data = new FormData();
      data.append('file',this.file);
      data.append('arr_name',this.file.name);

       //进度百分比
var config = {
        onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            this.videoProgress = complete/100
            console.log(this.videoProgress)
        }
    }
   axios.post(_this.Api+'Material_management/image/'+_this.material_id+'/1',data,config).then( res => {
      _this.$dialog.toast({
                mes: res.data.tips,
                timeout: 1000,
                icon: 'success'
            });
    _this.$router.push('/source');
    }).catch(function(error){
       _this.$dialog.toast({
                    mes: error.response.data.tips,
                    timeout: 1000,
                    icon: 'error'
                });
    })

}

}