<script src="../aliyun-vod-upload-sdk1.3.1.min.js"></script>
2.这里注意阿里云视频上传有两种方式，：VodMode 、STSMode。两者在视频上传中需要的上传凭证是不同的，在STS模式下需要后端给我们的值有：securityToken、accessKeyId、accessKeySecret，我们使用此方式，演示代码如下：
<template>
<div>
<input type="file" v-show="false" accept="video/*" ref="input" @change="fileChange">
<el-button size="small" type="primary" @click="$refs.input.click()" :disabled="disableUpload">
上传视频
</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploader.startUpload()" :disabled="disableSubmit">
开始上传
</el-button>
<div class="el-upload__tip">视频文件仅限5分钟以内，大小不超过150M</div>
<template v-if="uploadFile && uploadFile.name">
<div class="el-upload__tip">{{uploadFile.name}}</div>
<el-progress style="width:200px;" :percentage="percentage" :status="percentage === 100 ? 'success' : ''"></el-progress>
</template>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
securityToken: '',
accessKeyId: '',
accessKeySecret: '',
disableUpload: false,
disableSubmit: true,
uploadFile: null,
uploader: null,
callback: null,
videoId: '',
percentage: 0
}
},
watch: {
videoId: function (val) {
if (val !== this.value) {
this.$emit('input', val)
}
}
},
methods: {
fileChange() {
if (!event.target.files[0]) {
return false
}
console.log(event.target.files[0])
if (!event.target.files[0].type.match('video.*')) {
this.$message.error('请选择视频文件')
return false
}
this.uploadFile = event.target.files[0]
this.percentage = 0
// 上传文件的size的单位为 字节(b)
// 150兆字节(mb) = 157286400字节(b)
if (this.uploadFile.size <= 157286400) {
this.getAuth(() => {
// 给uploader大佬addFile
this.getUploder()
// 以下三个参数默认为空
// var endpoint = ''
// var bucket = ''
// var objectPre = ''
// if(objectPre)
// {
// object = objectPre +"/"+ event.target.files[i].name
// }
// STS的上传方式，需要在userData里指定Title
var userData = '{"Vod":{"StorageLocation":"","Title":"' + this.uploadFile.name + '","Description":"默认描述信息暂无","CateId":"19","Tags":"测试视频"}}'
this.uploader.addFile(this.uploadFile, '', '', '', userData)
console.log(`add file: ${this.uploadFile.name}`)
this.disableSubmit = false
})
} else {
this.disableSubmit = true
this.$message.error('上传的文件大小超过150M，请重新上传')
}
},
getAuth(callback) {
// 获取上传凭证
this.$apis.getVideoUploadAuth().then(res => {
if (res.code === '2000') {
this.securityToken = res.data.securityToken
this.accessKeyId = res.data.accessKeyId
this.accessKeySecret = res.data.accessKeySecret
callback()
} else {
this.$message.error(res.message)
}
}).catch(error => {
this.$message.error(error)
})
},
getUploder() {
let _this = this
/* eslint-disable no-undef */
_this.uploader = new AliyunUpload.Vod({
// 文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
_this.$message.error(`文件上传失败：${message}`)
console.log(`onUploadFailed: file:${uploadInfo.file.name},code:${code}, message:${message}`)
_this.disableSubmit = true
_this.disableUpload = false
},
// 文件上传完成
'onUploadSucceed': function (uploadInfo) {
console.log(uploadInfo)
// console.log(`onUploadSucceed: ${uploadInfo.file.name}, endpoint:${uploadInfo.endpoint}, bucket:${uploadInfo.bucket}, object:${uploadInfo.object}`)
_this.videoId = uploadInfo.videoId
_this.$message.success('文件上传成功')
_this.disableSubmit = true
_this.disableUpload = false
},
// 文件上传进度
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
_this.percentage = +(loadedPercent * 100).toFixed(0)
// console.log(`onUploadProgress:file:${uploadInfo.file.name}, fileSize:${totalSize}, percent:${(loadedPercent * 100.00).toFixed(2)}%`)
},
// STS临时账号会过期，过期时触发函数
'onUploadTokenExpired': function (uploadInfo) {
console.log('onUploadTokenExpired STS临时账号过期了')
// 实现时，从新获取STS临时账号用于恢复上传
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, securityToken, expireTime)
},
onUploadCanceled: function(uploadInfo) {
console.log(`onUploadCanceled:file:${uploadInfo.file.name}`)
},
// 开始上传
'onUploadstarted': function (uploadInfo) {
var accessKeyId = _this.accessKeyId
var accessKeySecret = _this.accessKeySecret
var securityToken = _this.securityToken
_this.uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, securityToken)
console.log(`onUploadStarted:${uploadInfo.file.name},endpoint:${uploadInfo.endpoint}, bucket:${uploadInfo.bucket}, object:${uploadInfo.object}`)
},
'onUploadEnd': function(uploadInfo) {
console.log('onUploadEnd: uploaded all the files')
}
})
}
}
}
</script>
结合后台提供的接口，我们在获取到后台提供的token之后，就可以实现使用vue来实现视频上传的功能，同时根据自己的需求，大家可以直接返回视频上传地址或传入富文本编辑器进行下一步操作。
2398359818@qq.com 评论 如何使用vue实现阿里：js怎么来
