#vue #element-ui #vod-js-sdk-v6

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

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

简介

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

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

1
{
2
  "element-ui": "2.11.1",
3
  "vue": "^2.6.10",
4
  "vue-router": "^3.0.1",
5
  "vod-js-sdk-v6": "^1.2.3"
6
}

正文

1.组件

src/components/UploadVideo/index.vue

1
<template>
2
  <div>
3
    <input
4
      :id="id"
5
      type="file"
6
      style="display: none;"
7
      name="single"
8
      multiple
9
      :accept="accept"
10
      @change="selectedFile"
11
    />
12
    <el-button
13
      size="small"
14
      type="primary"
15
      :loading="loading"
16
      @click="handleOpenFile()"
17
    >
18
      <i class="fa fa-upload" />
19
      {{ buttonName }}
20
    </el-button>
21
    <div v-if="isShowTips" class="el-upload__tip clear-margin-top">
22
      {{ tips }}
23
    </div>
24
    <el-progress v-if="loading" :percentage="progress" />
25
  </div>
26
</template>
27
28
<script>
29
  // 获取上传签名接口，根据自己项目更换
30
  import { getVodSignature } from "@/api/upload.js";
31
  import TcVod from "vod-js-sdk-v6";
32
  export default {
33
    name: "UploadVideo",
34
    props: {
35
      // 文件选取限制
36
      accept: {
37
        type: String,
38
        default: "video/*"
39
      },
40
      // 是否显示提示
41
      isShowTips: {
42
        type: Boolean,
43
        default: false
44
      },
45
      // 最大上传文件的大小
46
      maxFileSize: {
47
        type: Number,
48
        default: 500
49
      },
50
      // 提示内容
51
      tips: {
52
        type: String,
53
        default: ""
54
      },
55
      // 按钮名称
56
      buttonName: {
57
        type: String,
58
        default: "点击上传"
59
      }
60
    },
61
    data() {
62
      return {
63
        id: "upload-video-id-" + +new Date(),
64
        // 进度
65
        progress: 0,
66
        loading: false
67
      };
68
    },
69
70
    methods: {
71
      // 打开文件
72
      handleOpenFile() {
73
        document.getElementById(this.id).click();
74
      },
75
      // 选择好文件
76
      selectedFile($event) {
77
        const file = $event.target.files[0];
78
        if (file) {
79
          // loading..
80
          this.loading = true;
81
          // 上传
82
          this.upload(file);
83
        }
84
      },
85
      // 弹出message
86
      toastMessage(message) {
87
        this.$message.error(message);
88
        this.loading = false;
89
      },
90
      // 判断文件是否符合类型
91
      upload(file) {
92
        console.log(file);
93
        if (this.accept.includes("video") && !file.type.includes("video")) {
94
          this.toastMessage("上传文件必须是视频！！！");
95
          return;
96
        }
97
98
        this.start(file);
99
      },
100
      // 自定义上传
101
      async start(file) {
102
        try {
103
          // 获取签名 （这里必须定义为函数，tcVod才可识别）
104
          const getSignature = async function() {
105
            const { data } = await getVodSignature();
106
            return data;
107
          };
108
          // 前文中所述的获取上传签名的函数
109
          const tcVod = new TcVod({ getSignature });
110
          // 视频，类型为 File
111
          const uploader = tcVod.upload({ videoFile: file });
112
113
          /*
114
          新版本vod-js-sdk-v6@1.4.7 
115
          官方文档中监听方法'video_progress'已修改为'media_progress',
116
          源码中是两种都支持的，建议用'media_progress'
117
          */
118
          // 监听上传进度
119
          uploader.on("video_progress", info => {
120
            this.$emit("uploadProgress", parseInt(info.percent * 100));
121
            this.progress = parseInt(info.percent * 100);
122
          });
123
124
          // 监听上传完成
125
          const {
126
            fileId,
127
            video: { url }
128
          } = await uploader.done();
129
          this.$emit("subUploadSucceed", { url, fileId });
130
          this.loading = false;
131
        } catch (error) {
132
          console.log(error);
133
        }
134
      }
135
    }
136
  };
137
</script>
138
139
<style lang="scss" scoped>
140
  .clear-margin-top {
141
    margin-top: 0;
142
  }
143
</style>

2.使用

1
<template>
2
  <div>
3
    <div v-show="url">
4
      <video :src="url" />
5
    </div>
6
7
    <app-upload-video
8
      :button-name="上传视频"
9
      @subUploadSucceed="getVideoUploadSucceedResult"
10
    />
11
  </div>
12
</template>
13
14
<script>
15
  import AppUploadVideo from "@/components/UploadVideo";
16
  export default {
17
    name: "GoodsForm",
18
    components: {
19
      AppUploadVideo
20
    },
21
    data() {
22
      return {
23
        url: ""
24
      };
25
    },
26
    methods: {
27
      // 视频上传成功
28
      getVideoUploadSucceedResult(url) {
29
        this.url = url;
30
      }
31
    }
32
  };
33
</script>

参考链接

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

#vue #element-ui #vod-js-sdk-v6