vue调用腾讯云sdk实现视频上传并实时展示更新上传进度

话不多说，上车吧铁子，上传速度和腾讯云后台一样快！

惯例，效果图先出

image.png
image.png
image.png

扔代码

<template>
  <div>
      <!-- 视频上传 -->
      <el-form-item label="视频上传">
        <el-button @click="vExampleAdd">点击上传<i class="el-icon-upload el-icon--right"></i></el-button>
        <span v-html="uploadLoading"></span>
        <form ref="vExample">
          <input type="file" style="display:none;" ref="vExampleFile" @change="vExampleUpload" />
        </form>
      </el-form-item>
      <!-- 视频名称 -->
      <el-form-item label="视频名称" v-if="uploaderInfos.progress == 1">
        <span>{{uploaderInfos.videoInfo.name + '.' + uploaderInfos.videoInfo.type}}</span>
      </el-form-item>
      <!-- 上传进度 -->
      <el-form-item label="上传进度" v-if="uploaderInfos.progress != 0">
        <el-progress :percentage="uploaderInfos.progress * 100" class="progress" :text-inside="true" :stroke-width="15" />
        <el-button @click="resetUp" v-if="uploaderInfos.progress != 1 && uploaderInfos.progress != 0" v-show="showReBtn">取消上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-form-item>
  </div>
</template>

<script>
import { getsign } from "@/api/common";
import TcVod from 'vod-js-sdk-v6'
export default {
  data() {
    return {
      showReBtn: true,//取消上传后 改成false不显示显示按钮
      uploadLoading: "", //上传状态html
      ruleForm: {},
      uploader: {},//上传文件对象
      uploaderInfos: {
        videoInfo: "",//上传文件的name和type
        isVideoUploadSuccess: false, //是否上传成功，默认false
        isVideoUploadCancel: false,//是否取消上传 ，默认false
        progress: 0, //进度条 ，默认0
        videoUrl: '', //上传成功后videoUrl
      },//上传详情
    }
  },
  methods: {
    //点击上传视频按钮触发
    vExampleAdd() {
      this.$refs.vExampleFile.click()
    },
    //input change 事件
    vExampleUpload() {
      this.uploadLoading = '<i class="el-icon-loading icon"></i>解析中...'
      var self = this;
      var mediaFile = this.$refs.vExampleFile.files[0]
      this.uploader = this.tcVod.upload({
        mediaFile: mediaFile,
      })
      // 视频上传进度
      this.uploader.on('media_progress', function (info) {
        self.uploadLoading = '<i class="el-icon-loading icon"></i>上传中...'
        self.uploaderInfos.progress = info.percent;
      })
      // 视频上传完成时
      this.uploader.on('media_upload', function (info) {
        self.uploaderInfos.isVideoUploadSuccess = true;
        self.$message.success('上传成功')
        self.uploadLoading = '上传成功！'
      })

      self.uploaderInfos.videoInfo = this.uploader.videoInfo //用来展示视频的名字和type 例如：xxx.mp4

      this.uploader.done().then(function (doneResult) {
        self.uploaderInfos.videoUrl = doneResult.video.url
        self.$emit("uploadSuccess",self.uploaderInfos.videoUrl)
        self.$refs.vExample.reset();
      })
    },
    //取消上传
    resetUp() {
      this.uploaderInfos.isVideoUploadCancel = true;
      this.uploader.cancel()
      this.$message.error("您取消了上传！")
      this.uploadLoading = '已取消'
      this.$refs.vExample.reset() //避免选择相同文件不触发change事件
      this.showReBtn = false
      this.uploaderInfos.progress = 0
    }
  },
  created() {
    //获取签名
    function getSignature() {
      return getsign(JSON.stringify({
        "Action": "GetUgcUploadSign"
      })).then(function (response) {
        return response.data.sign
      })
    };
    this.tcVod = new TcVod({
      getSignature: getSignature
    });
  },
}
</script>

<style lang="scss" scoped>
.progress {
  display: inline-block;
  width: 400px;
}
/deep/ .icon {
  margin-right: 5px;
}
</style>

封装成一个简易组件了，别的页面直接引入调用

<template>
  <div class="main">
    <el-card>
      <el-form :model="ruleForm" label-width="100px" label-position="left" ref="ruleForm" class="demo-ruleForm">
        <uploadVideo @uploadSuccess='uploadSuccess'></uploadVideo>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getsign } from "@/api/common";
import TcVod from 'vod-js-sdk-v6'
import uploadVideo from "@/components/Common/uploadVideo";
export default {
  data() {
    return {
      ruleForm: {},
      formData: {
        videoUrl: ''
      }
    }
  },
  methods: {
    //上传成功回调
    uploadSuccess(url) {
      this.formData.videoUrl = url
    }
  },

  components: {
    uploadVideo,
  },
}
</script>

<style lang="scss" scoped>
.main {
  margin: 10px;
}
</style>

不懂的 可以私聊问我 ，广交天下朋友～