Vue2.0 webApp视频预览并上传，百分比进度显示

 

请选择或者拍摄视频上传

 

   
     

     
     

{{videoProgress*100}}%

     

    确认上传

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'
                });
    })

}

}