fpsys/src/components/Common/UploadVideo.vue

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="isShow"
      :title="curObj.id ? '上传视频' : '上传视频'"
      :fullscreen="false"
      width="500px"
      custom-class="xl-dialog"
      center
    >
      <div class="tip">上传新的视频：请等待<span class="b">上传成功</span>后再点击顶部的确定保存</div>
      <el-upload
        class="upload-demo"
        ref="upload"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :multiple="false"
        :limit="1"
        :file-list="fileList"
        @change="fileChange"
        :http-request="submitUpload"
        :auto-upload="true">
        <el-button v-if="!cObj.video" slot="trigger" size="small" type="primary">选取新视频</el-button>
        <el-button v-if="fileNextResObj.total && fileNextResObj.total.percent === 100" size="small" type="success" style="margin-left: 10px;">{{ fileNextResObj.total ? fileNextResObj.total.percent === 100 ? '上传成功' :`上传中${parseInt(fileNextResObj.total.percent)}%` : '上传到服务器'}}</el-button>
        <el-progress v-else-if="fileNextResObj.total" class="tip3" :text-inside="true" :stroke-width="20" :percentage="parseInt(fileNextResObj.total.percent)"></el-progress>
        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        <!-- v-else-if="fileNextResObj.total"  fileNextResObj.total.percent-->
      </el-upload>
      <div class="xl-form">
        <div class="xl-form-footer">
          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
          <el-button class="xl-form-btn t1" @click="close('confirm')">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as qiniu from 'qiniu-js'
import { convertFileName } from '@/utils'
export default {
  mixins,
  props: {
    isShow: Boolean,
    curFrom: String,
    curObj: Object
  },
  inject: ['parentData'],
  data() {
    return {
      loading: false,
      cObj: {},
      fileList: [],
      fileConfig: {},
      fileNextResObj: {},
      fileCompleteResObj: {},
    }
  },
  mixins: [...mixins],
  watch: {
    isShow: function(val) {
      if (val) {
        this.fileList= []
        this.fileNextResObj = {}
        let cObj = this.cObj
        cObj.video = ''
        this.cObj = {...cObj}
        this.$api.base.uploadvideotoken().then(res => {
          this.fileConfig = res || {}
        })
      }
    },
  },
  computed: {
  },
  mounted() {
    
  },
  methods: {
    
    submitUpload() {
      console.log('submitUpload')
      if (this.fileNextResObj.total) {
        this.$msgConfrm('正在上传中，如需重新上传，请保存当前页面重新上传')
        return
      }
      const upload = this.$refs.upload || {}
      const curFile = upload.uploadFiles[0] || {}

      let config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        debugLogLevel: 'INFO'
      }
      let putExtra = {
        fname: '',
        params: {},
        mimeType: null
      }

      let next = (response) =>{
        console.log(response, 11)
        this.fileNextResObj = response
      }
      let complete = (response) =>{
        console.log(response, 22)
        let cObj = this.cObj
        cObj.video = `${this.fileConfig.domain}/${response.key}`
        this.cObj = {...cObj}
        console.log(cObj, 333)
      }

      let subscription;
      // 调用sdk上传接口获得相应的observable，控制上传和暂停
      // let observable = qiniu.upload(curFile.raw, curFile.name, this.fileConfig.token, putExtra, config);
      let observable = qiniu.upload(curFile.raw, this.curFrom+convertFileName(curFile.name, 'onlyName'), this.fileConfig.token, putExtra, config);
      observable.subscribe(next, null, complete)

      // this.$refs.upload.submit();
    },

    handleRemove(file, fileList) {
      this.fileNextResObj = {}
      let cObj = this.cObj
      cObj.video = ''
      this.cObj = {...cObj}
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    fileChange (e) {
      console.log(e)
    },

    close (str) {
      if (str === 'confirm') {
        if (this.cObj.video) {
          this.$emit('close', this.cObj)
        } else {
          this.$msgConfrm('请上传视频')
        }
      } else {
        this.$emit('close', {})
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.lib-edit {
  padding-top: 0;
  width: 500px;
  ::v-deep .el-date-editor.el-input {
    width: 100%;
  }
}

.tip {
  color: #f00;
  .b {
    font-weight: bold;
    display: inline-block;
    font-size: 20px;
  }
}
.tip2 {
  display: inline-block;
  width: 300px;
  color: #606266;
}
.tip3 {
  display: inline-block;
  margin-left: 10px;
  width: 300px;
}
.i {
  border: 0;
  border-bottom: 1px solid #dcdcdc;
  width: 50px;
  text-align: center;
  outline: none;
}
.dot {
  display: inline-block;
  width: 50px;
  &.t2 {
    text-align: center;
  }
}

</style>