vue+elementui运用el-upload结合vod-js-sdk-v6实现腾讯云点播视频上传

第一步：npm install vod-js-sdk-v6

写成组件 upload代码片。

// An highlighted block
<template>
  <div style="width: 400px">
    <el-upload
      action="#"
      :accept="accept"
      :disabled="disabled"
      :limit="1"
      :http-request="uploadVideo"
      :before-upload="beforeUploadVideo"
      :on-exceed="handleExceed"
      :show-file-list="false"
    >
      <el-button :disabled="disabled" :loading="loading" class="button-uploader" size="small" type="primary">
        <i class="fa fa-upload" />
        上传视频/音频
      </el-button>
    </el-upload>
    <el-progress v-if="loading" :percentage="progress" />
  </div>
</template>

<script>
import { getSignature, getAntiLeechUrl } from '@/api/upload.js'
import { sendVideoResource } from '@/api/learning'
import moment from 'moment'
import TcVod from 'vod-js-sdk-v6'
export default {
  name: 'UploadVideo',
  props: {
    accept: {
      type: String,
      default: 'video/mp4, audio/mp3'
    },
    title: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    watermarkFlag: {
      type: String,
      default: '1'
    },
    classId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      resourceType: '',
      videoDuration: 1000,
      uploaderInfo: {},
      progress: 0,
      percentageImage: 0,
      loading: false
    }
  },
  created() {
  },
  methods: {
    // 视频处理
    handleExceed(files, fileList) {
      this.$message.error(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeUploadVideo(file) {
      if (this.title === '') {
        this.popMessage('视频上传前，请先填写课程标题')
        return false
      }
      if (this.classId === '') {
        this.popMessage('视频上传前，请先选择科目并确定是否添加水印')
        return false
      }
      if (['video/mp4', 'audio/mp3'].indexOf(file.type) === -1) {
        this.popMessage('请上传正确的音频或视频格式')
        return false
      }
      if (file.type === 'video/mp4') {
        const isLt1G = file.size / 1024 / 1024 < 1024
        if (!isLt1G) {
          this.popMessage('上传视频大小不能超过1G')
          return false
        }
        this.resourceType = '1'
      }
      if (file.type === 'audio/mp3') {
        const isLt100M = file.size / 1024 / 1024 < 100
        if (!isLt100M) {
          this.popMessage('上传音频大小不能超过100M')
          return false
        }
        this.resourceType = '2'
      }
    },
    popMessage(message) {
      this.$message.error(message)
      this.loading = false
    },
    uploadVideo(event) {
      this.loading = true
      this.start(event.file)
    },
    // 自定义上传
    async start(file) {
      try {
        // eslint-disable-next-line no-irregular-whitespace
        const userName = this.$store.getters.name
        const currentTime = moment(Date.now()).format('YYYYMMDDHHmmss')
        const type = file.type.split('/')[1]
        const copyFile = new File([file], `${this.title}_${currentTime}.${type}`)
        const _this = this
        const tcVod = new TcVod({ getSignature: this.getSignature })
        // 视频，类型为 File
        const uploader = tcVod.upload({
          mediaFile: copyFile
        })
        // 视频上传进度
        uploader.on('media_progress', info => {
          this.progress = parseInt(info.percent * 100)
          uploaderInfo.progress = parseInt(info.percent * 100)
        })
        // 视频上传完成
        uploader.on('media_upload', function(info) {
          uploaderInfo.isVideoUploadSuccess = true
        })
        var uploaderInfo = {
          videoInfo: uploader.videoInfo,
          coverInfo: uploader.coverInfo,
          isVideoUploadSuccess: false,
          isVideoUploadCancel: false,
          isCoverUploadSuccess: false,
          resourceType: _this.resourceType,
          progress: 0,
          coverProgress: 0,
          fileId: '',
          videoUrl: '',
          coverUrl: '',
          cancel: function() {
            uploaderInfo.isVideoUploadCancel = true
            uploader.cancel()
          }
        }
        this.uploaderInfo = uploaderInfo
        uploader.done().then(function(doneResult) {
          uploaderInfo.fileId = doneResult.fileId
          if (uploaderInfo.isVideoUploadSuccess) {
            _this.sendVideoResource(doneResult.fileId, doneResult.video.url, userName)
          }
          return _this.getAntiLeechUrl(doneResult.video.url, _this.videoDuration)
        }).then(function(videoUrl) {
          uploaderInfo.videoUrl = videoUrl
          _this.$emit('subUploadSucceed', uploaderInfo)
          _this.loading = false
        })
      } catch (error) {
        this.loading = false
        this.$emit('subUploadSucceed', '')
      }
    },
    async getSignature() {
      const params = {
        resourceType: this.resourceType,
        watermarkFlag: Number(this.watermarkFlag),
        classId: this.classId
      }
      const res = await getSignature(params)
      if (res.code === 0) {
        return res.data
      } else this.$message({ message: res.msg, type: 'error' })
    },
    async getAntiLeechUrl(url, duration) {
      const query = {
        originalUrl: url,
        duration: duration
      }
      const res = await getAntiLeechUrl(query)
      if (res.code === 0) {
        this.videoUrl = res.data
        return res.data
      } else this.$message({ message: res.msg, type: 'error' })
    },
    async sendVideoResource(fileId, url, userName) {
      const query = {
        fileId: fileId,
        mediaUrl: url,
        createdBy: userName
      }
      const res = await sendVideoResource(query)
      if (res.code === 0) {
        return res.data
      } else this.$message({ message: res.msg, type: 'error' })
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-margin-top {
  margin-top: 0;
}
.button-uploader {
  background: #EEF5FF;
  border: 1px solid #CFE3FD;
  color: #5E9FF8;
}
</style>

父组件接收

下面展示一些 内联代码片。

// An highlighted block
<template>
      <el-form-item label="课件" required>
        <div class="tip">视频大小不超过1G，格式为mp4；音频大小不超过100M，格式为mp3</div>
        <UploadVideo
          :title="formData.title"
          :watermark-flag="formData.watermarkFlag"
          :class-id="String(formData.subject)"
          :disabled="formData.packageFlag"
          @subUploadSucceed="getVideoUploadSucceedResult"
        />
        <video v-if="videoUrl && resourceType === '1'" controls="controls" class="avatar" :src="videoUrl" />
        <audio
          v-if="videoUrl && resourceType === '2'"
          controls="controls"
          :src="videoUrl"
          :style="{ height: '74px'}"
        />
        <div v-if="isUploadFailed" style="color: red">上传失败,请重新上传</div>
      </el-form-item>
</template>
<scirpt>
export default {
  methods: {
    getVideoUploadSucceedResult(uploaderInfo) {
      if (uploaderInfo !== '') {
        this.videoUrl = uploaderInfo.videoUrl
        this.resourceType = uploaderInfo.resourceType
        this.formData.fileId = uploaderInfo.fileId
      } else {
        this.isUploadFailed = true
      }
    }
  }
}
</script>