VUE使用Element上传视频下载视频及预览

VUE使用Element下载视频及预览

.html

 <div v-if="videoForm.showVideoPath ==''">
                        <el-upload
                         :action="upimgurl"//接口
                         v-bind:data="{step:'image',token:this.token}"//需要的参数
                         drag
                         v-bind:on-progress="uploadVideoProcess"
                         v-bind:on-success="handleVideoSuccess"
                         v-bind:before-upload="beforeUploadVideo"
                         v-bind:show-file-list="false">
                          <i class="el-icon-upload"></i>
                          <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
                          <div class="el-upload__tip" slot="tip">只能上传视频文件，且不超过5MB</div>
                        </el-upload>
        </div>
        <video v-if="videoForm.showVideoPath !='' && !videoFlag"
               v-bind:src="videoForm.showVideoPath"
               class="avatar video-avatar"
               controls="controls">
            您的浏览器不支持视频播放
        </video>

.js

return{
 //参数
 videoFlag: false,
  //是否显示进度条
  videoUploadPercent: "",
  //进度条的进度，
 isShowUploadVideo: false,
 //显示上传按钮
   videoForm: {
     showVideoPath: ''
    },
}




beforeUploadVideo(file) {
    var fileSize = file.size / 1024 / 1024 < 5;
     if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
       this.$alert('请上传正确的视频格式', '提示', {
          confirmButtonText: '确定',
          callback: action => {
             this.$message({
                  type: 'info',
                     message: `action: ${ action }`
                  });
             }
        });
        return false;
   }
    if (!fileSize) {
      this.$alert('视频大小不能超过5MB', '提示', {
          confirmButtonText: '确定',
              callback: action => {
                 this.$message({
                   type: 'info',
                     message: `action: ${ action }`
              });
         }
     });
     return false;
   }
        his.isShowUploadVideo = false;
   },
                 //进度条
                 uploadVideoProcess(event, file, fileList) {
                     this.videoFlag = true;
                     this.videoUploadPercent = file.percentage.toFixed(0) * 1;
                 },
                 //上传成功回调
                 handleVideoSuccess(res, file) {
                     this.isShowUploadVideo = true;
                     this.videoFlag = false;
                     this.videoUploadPercent = 0;
                     //后台上传地址
                     if (res.code == 1) {
                         console.log('执行了',res.data.image_url)
                         this.curgimg = res.data.image_url
                         this.videoForm.showVideoPath = (this.httpurl + res.data.image_url);
                     } else {
                         this.$alert(res.info, '提示', {
                                   confirmButtonText: '确定',
                                   callback: action => {
                                     this.$message({
                                       type: 'info',
                                       message: `action: ${ action }`
                                     });
                                   }
                        });
                     }
                 },

有什么问题欢迎评论留言，我会及时回复你的