vue使用阿里云视频点播_vue3 + ts 将视频上传到阿里云视频点播

vue使用阿里云视频点播——videoId + playauth的方式

一. 上传视频
官方文档https://help.aliyun.com/document_detail/52204.htm?spm=a2c4g.11186623.0.0.4885a393kRPguB#task-1995648

1.在index.html页面引入JavaScript脚本。

<script src="/static/aliyun-oss-sdk.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.2.min.js"></script>
<script src="/static/es6-promise.min.js"></script>
1
2
3

2. 具体代码，已有视频时回显并且可以查看视频、删除视频；没有视频显示上传视频

<template>
  <div class="container">
    <div class="upload">
      <div class="preview" @click="onpreview(file)" v-if="coverURL">
        <img :src="coverURL" alt="" class="imgUrl">
        <div class="play-icon el-icon-video-play"></div>
        <span class="el-icon-circle-close cancel" @click.stop="deleteVideo"></span>
      </div>
      <div>
        <input type="file" id="fileUpload" @change="fileChange($event)">
        <label class="status">上传状态: <span>{
   {
   statusText}}</span></label>
      </div>
      <div class="upload-type">
        <button @click="authUpload" :disabled="uploadDisabled">开始上传</button>
        <button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
        <button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>
        <span class="progress">上传进度: <i id="auth-progress">{
   {
   authProgress}}</i> %</span>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getVideoUploadAuth, refreshVideoUploadAtuh, getPlayAuth } from '@/api/common.js' // 后端提供的接口：获取视频上传凭证、刷新上传凭证、获取视频播放凭证
  import config from '@/utils/videoSort.js' // 后端提供的视频分类信息，包含sort名、cateId、description等
  import Previewer from '@/components/VideoPlayer/index' // 查看视频

  export default {
   
    model: {
   
      prop: 'value',
      event: 'sync'
    },
    props: {
   
      value: {
   
        type: [Array, String],
        default: () => []
      },
      sort: {
    // 后端提供的视频分类
        type: String,
        default: ''
      },
      vId: {
    // 已有视频时父组件传入的vid
        type: String,
        default: ''
      }
    },
    data () {
   
      return {
   
        videoSortParams: '', // 根据父组件传入的sort，查找config中对应的分类信息
        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '123456', // 必填，只需有值即可
        file: null,
        authProgress: 0,
        uploadDisabled: true,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70