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

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

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

<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>

二、封装阿里云点播方法

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, // 是否上报上传日志到点播，默认为truelocalCheckpoint: true, // 此参数是禁用服务端缓存// 添加文件成功addFileSuccess: function (uploadInfo) {console.log('addFileSuccess：', uploadInfo)},// 初始化上传实例，开始上传onUploadstarted: function (uploadInfo) {console.log('onUploadstarted：', uploadInfo)// 获取上传凭证 sts tokenaxios.get('你的获取上传凭证的api url').then(({ data }) => {const accessKeyId = data.accessKeyIdconst accessKeySecret = data.accessKeySecretconst secretToken = data.securityTokenuploader.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.accessKeyIdconst accessKeySecret = data.accessKeySecretconst secretToken = data.securityTokenuploader.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() // 开始上传
}

三、页面中使用

<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>