【VUE】VUE+ELEMENT运用el-upload结合vod-js-sdk-v6实现腾讯云点播视频上传-2021

为什么强调2021 因为以前的API很多都改了。踩了不少坑。

			前人栽树
			后人乘凉
			       ------------

npm install vod-js-sdk-v6 安装点播

vue组件 upio.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 "@/utils/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: {
    // getVodSignature() {
    //   return this.$api.$GET(this.$url.getVideoSignature, {}).then((res) => {
    //     console.log("签名---->", res);
    //     return res.response.signature;
    //   });
    // },
    // 打开文件
    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(file.size>1024*1024*20){
         this.toastMessage("上传文件不能大于20m");
        return;
      }
      if (this.accept.includes("video") && !file.type.includes("video")) {
        this.toastMessage("上传文件必须是视频！！！");
        return;
      }

      this.start(file);
    },
    // 自定义上传
    async start(file) {
      try {
        // 获取签名 （这里必须定义为函数，tcVod才可识别）
        // const getSignature = async function () {
        //   return await getVodSignature();
          
        // };
        // console.log('getVodSignature-->',getVodSignature);
        // 前文中所述的获取上传签名的函数
        const tcVod = new TcVod({ getSignature:getVodSignature });
        // 视频，类型为 File
        const uploader = tcVod.upload({ mediaFile: file });

        /*
        新版本vod-js-sdk-v6@1.4.7 官方文档中监听方法'video_progress'已修改为'media_progress',
        源码中是两种都支持的，建议用'media_progress'
        */
        uploader
          .done()
          .then((res) => {
            console.log("esdadada", res);
          })
          .catch((e) => {
            console.log("捕获错误-->", e);
          });
        // 监听上传进度
        uploader.on("video_progress", (info) => {
          this.$emit("uploadProgress", parseInt(info.percent * 100));
          this.progress = parseInt(info.percent * 100);
        });
        uploader.on("media_progress", function (info) {
          console.log(info.percent); // 进度
        });

        // 监听上传完成
        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>

此处有个坑

 const tcVod = new TcVod({ getSignature:getVodSignature });
 //getSignature  是参数名字 不能变化
 //getVodSignature 此处为 getSignature 的值 不固定 但是必须是 获取签名的函数

引入

  <div>
                      <video
                        style="width: 200px"
                        :src="video_url"
                        controls="controls"
                      ></video>
                    </div>

                    <Upio
                      v-show="video_url"
                      :button-name="上传视频"
                      @subUploadSucceed="getVideoUploadSucceedResult"
                    />



//不可直接复制全部
import Upio from "./upio.vue";
//不可直接复制..
 components: {
    Upio,
  },

//方法
 getVideoUploadSucceedResult(url) {
      console.log("上传成功-->", url);
      this.video_url = url.url;    //赋值不固定 看后台怎么传
    },

import { getVodSignature } from “@/utils/upload.js”;

自己封装的获取签名的函数 后台提供接口

import api from './api.js'
import url from './url.js'

export function getVodSignature() {
    return api.$GET(url.getVideoSignature, {}).then((res) => {
        console.log("签名---->", res);
        return res.response.signature;
      });
  }