上传视频

<template>
  <div
    style="
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
    "
  >
    <div class="setBox">
      <div class="setBox_d">视频名称</div>
      <div><el-input v-model="input" placeholder="请输入内容"></el-input></div>
    </div>
    <div class="setBox">
      <div class="setBox_d" style="line-height: 16px">上传视频</div>
      <div>
        <el-upload
          class="avatar-uploader"
          action="上传地址"
          :data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
          :on-progress="uploadVideoProcess"
          :on-success="handleVideoSuccess"
          :before-upload="beforeUploadVideo"
          :show-file-list="false"
        >
          <video
            v-if="videoForm.showVideoPath != '' && !videoFlag"
            :src="videoForm.showVideoPath"
            class="avatar video-avatar"
            controls="controls"
          >
            您的浏览器不支持视频播放
          </video>
          <i
            v-else-if="videoForm.showVideoPath == '' && !videoFlag"
            class="el-icon-plus avatar-uploader-icon"
          ></i>
          <el-progress
            v-if="videoFlag == true"
            type="circle"
            :percentage="videoUploadPercent"
            style="margin-top: 7px"
          ></el-progress>
        </el-upload>
        <p style="font-size:12px;color:#a6a6a6">最多可以上传1个视频，建议大小50M，推荐格式mp4</p>
      </div>
    </div>
    <div class="setBox">
      <div class="setBox_d"></div>
      <div>
        <el-button type="primary" @click="back">返回</el-button>
        <el-button type="primary" @click="sureBtn">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: '',
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: '',
      },
      input: '',
    }
  },
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
          'video/mov',
        ].indexOf(file.type) == -1
      ) {
        layer.msg('请上传正确的视频格式')
        return false
      }
      if (!fileSize) {
        layer.msg('视频大小不能超过50MB')
        return false
      }
      this.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 (file.status == 'success' ) {
      //    this.videoForm.showVideoPath = file.url;
      //} else {
      //     layer.msg("上传失败，请重新上传");
      //}

      //后台上传地址
      if (res.Code == 0) {
        this.videoForm.showVideoPath = res.Data
      } else {
        layer.msg(res.Message)
      }
    },
    sureBtn() {},
    back() {
      this.$router.go(-1)
    },
  },
  components: {},
}
</script>

<style scoped>
.setBox {
  display: flex;
  margin-bottom: 40px;
}
.setBox_d {
   120px;
  text-align: right;
  margin-right: 15px;
  line-height: 32px;
}
</style>