vue结合vod-js-sdk-v6上传视频到腾讯云点播组件

腾讯云Web 端上传 vod-js-sdk-v6官方文档

简介

业务需求，vue结合vod-js-sdk-v6上传视频到腾讯云点播组件

主要依赖说明 （先安装，步骤略）

 {
    "element-ui": "2.11.1",  
    "vue": "^2.6.10",
    "vue-router": "^3.0.1",
    "vod-js-sdk-v6": "^1.2.3"
 }

正文

1.组件

src/components/UploadVideo/index.vue

<template>
  <div>
    <input
      :id="id"
      type="file"
      style="display: none;"
      name="single"
      multiple
      :accept="accept"
      @change="selectedFile"
    />
    <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()">
      <i class="fa fa-upload" />
      {{ buttonName }}
    </el-button>
    <div v-if="isShowTips" class="el-upload__tip clear-margin-top">{{ tips }}</div>
    <el-progress v-if="loading" :percentage="progress" />
  </div>
</template>

<script>
// 获取上传签名接口，根据自己项目更换
import { getVodSignature } from '@/api/upload.js'
import TcVod from 'vod-js-sdk-v6'
export default {
  name: 'UploadVideo',
  props: {
    // 文件选取限制
    accept: {
      type: String,
      default: 'video/*'
    },
    // 是否显示提示
    isShowTips: {
      type: Boolean,
      default: false
    },
    // 最大上传文件的大小
    maxFileSize: {
      type: Number,
      default: 500
    },
    // 提示内容
    tips: {
      type: String,
      default: ''
    },
    // 按钮名称
    buttonName: {
      type: String,
      default: '点击上传'
    }
  },
  data() {
    return {
      id: 'upload-video-id-' + +new Date(),
      // 进度
      progress: 0,
      loading: false
    }
  },

  methods: {
    // 打开文件
    handleOpenFile() {
      document.getElementById(this.id).click()
    },
    // 选择好文件
    selectedFile($event) {
      const file = $event.target.files[0]
      if (file) {
        // loading..
        this.loading = true
        // 上传
        this.upload(file)
      }
    },
    // 弹出message
    toastMessage(message) {
      this.$message.error(message)
      this.loading = false
    },
    // 判断文件是否符合类型
    upload(file) {
      console.log(file)
      if (this.accept.includes('video') && !file.type.includes('video')) {
        this.toastMessage('上传文件必须是视频！！！')
        return
      }

      this.start(file)
    },
    // 自定义上传
    async start(file) {
      try {
        // 获取签名 （这里必须定义为函数，tcVod才可识别）
        const getSignature = async function() {
          const { data } = await getVodSignature()
          return data
        }
        // 前文中所述的获取上传签名的函数
        const tcVod = new TcVod({ getSignature })
        // 视频，类型为 File
        const uploader = tcVod.upload({ videoFile: file })
                     
        /*
        新版本vod-js-sdk-v6@1.4.7 官方文档中监听方法'video_progress'已修改为'media_progress',
        源码中是两种都支持的，建议用'media_progress'
        */
        // 监听上传进度  
        uploader.on('video_progress', info => {
          this.$emit('uploadProgress', parseInt(info.percent * 100))
          this.progress = parseInt(info.percent * 100)
        })
        
        // 监听上传完成
        const {
          fileId,
          video: { url }
        } = await uploader.done()
        this.$emit('subUploadSucceed', { url, fileId })
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-margin-top {
  margin-top: 0;
}
</style>

2.使用

<template>
   <div>
    <div v-show="url">
        <video :src="url"  />
    </div>
  
    <app-upload-video
        :button-name="上传视频"
        @subUploadSucceed="getVideoUploadSucceedResult"
    />
  </div>
</template>

<script>
import AppUploadVideo from '@/components/UploadVideo'
export default {
  name: 'GoodsForm',
  components: {
    AppUploadVideo
  },
  data() {
    return {
      url: ''
    }
  },
  methods: {
    // 视频上传成功
    getVideoUploadSucceedResult(url) {
      this.url = url
    }
  }
}
</script>
 

参考链接

腾讯云Web 端上传 vod-js-sdk-v6官方文档