Vue集成阿里云点播实现视频上传

实现方式有多种，如下是我的实现方式：

一、下载点播插件，在 public 下的 index.html 中引入阿里云点播需要的 js 插件，js 文件最好放在 cdn 上,，这里以放在 public 文件夹下的 static 文件夹中为例：

javascript 复制代码

<script src="/static/aliyun-upload-sdk-1.5.6/lib/es6-promise.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.6/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.6/aliyun-upload-sdk-1.5.6.min.js"></script>

二、封装阿里云点播方法

javascript 复制代码

import axios from 'axios'

function createUplader(self) {
  // 声明AliyunUpload.Vod初始化回调
  const uploader = new window.AliyunUpload.Vod({
    userId: '122',
    partSize: 1048576,
    parallel: 5,
    retryCount: 3,
    retryDuration: 2,
    region: 'cn-shanghai',
    enableUploadProgress: true, // 是否上报上传日志到点播，默认为true
    localCheckpoint: true, // 此参数是禁用服务端缓存
    // 添加文件成功
    addFileSuccess: function (uploadInfo) {
      console.log('addFileSuccess：', uploadInfo)
    },
    // 初始化上传实例，开始上传
    onUploadstarted: function (uploadInfo) {
      console.log('onUploadstarted：', uploadInfo)
      // 获取上传凭证 sts token
      axios.get('你的获取上传凭证的api url').then(({ data }) => {
        const accessKeyId = data.accessKeyId
        const accessKeySecret = data.accessKeySecret
        const secretToken = data.securityToken
        uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken) // 设置STS Token
      })
    },
    // 文件上传成功
    onUploadSucceed: function (uploadInfo) {
      console.log('onUploadSucceed：', uploadInfo, self)
      // 在这里通过回调拿到阿里云返回的上传成功的数据
      self.getFileData(uploadInfo)
    },
    // 文件上传失败
    onUploadFailed: function (uploadInfo) {
      console.log('onUploadFailed：', uploadInfo)
      self.$message.warning('文件上传失败')
    },
    // 取消文件上传
    onUploadCanceled: function (uploadInfo, code, message) {
      console.log('onUploadCanceled: ', uploadInfo, code, message)
    },
    // 文件上传进度，单位：字节
    onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {
      console.log('onUploadProgress：', uploadInfo, totalSize, loadedPercent)
    },
    // 上传STS Token失效
    onUploadTokenExpired: function () {
      console.log('onUploadTokenExpired：上传文件超时')
      axios.get('你的获取上传凭证的api url').then(({ data }) => {
        const accessKeyId = data.accessKeyId
        const accessKeySecret = data.accessKeySecret
        const secretToken = data.securityToken
        uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken) // 更新STS Token重新上传
      })
      self.$message.success('上传文件超时，正在重新上传')
    },
    // 全部文件上传结束
    onUploadEnd: function (uploadInfo) {
      console.log(uploadInfo, 'onUploadEnd: uploaded all the files')
      self.$message.success('上传成功!')
    }
  })
  return uploader
}

export default function videoChange(file) {
  this.uploader = createUplader(this)
  const paramData = {
    'Vod': {
        'Title': file.name, // 设置阿里云视频控制台Name为文件名
    }
  }
  // 添加上传文件
  this.uploader.addFile(file, null, null, null, JSON.stringify(paramData))
  this.uploader.startUpload() // 开始上传
}

三、页面中使用

javascript 复制代码

<template>
  <a-upload
    :customRequest="handleChange"
    :file-list="fileList"
  >
    <a-button> <a-icon type="upload" /> 上传 </a-button>
  </a-upload>
</template>

<script>
import videoChange from '@/utils/upload-file-to-sts.js'
export default {
  data() {
    return {
      fileList: [], // 已经上传的文件列表
    }
  },
  mounted() {},
  methods: {
    getFileData(res) {
      this.fileList = this.fileList.concat(res)
      this.$emit('input', this.fileList)
    },
    /** 自定义上传事件 */
    async handleChange(info) {
      console.log(info)
      videoChange.call(this, info.file)
    }
  }
}
</script>