郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

如何使用vue实现阿里云视频上传的功能?
当前位置:首页 > 建站技巧 > 网站代码 >

如何使用vue实现阿里云视频上传的功能?

时间: 2019-03-22 分类: 网站代码 浏览次数:

网站建设项目开发中,我们一般都采用了服务器更稳定,技术及服务更完善的阿里云作为我们的硬件基础,那么基于阿里云的视频传输存储服务,我们如何使用vue来实现视频的上传呢?...

网站建设项目开发中,我们一般都采用了服务器更稳定,技术及服务更完善的阿里云作为我们的硬件基础,那么基于阿里云的视频传输存储服务,我们如何使用vue来实现视频的上传呢?

如何使用vue实现阿里云视频上传的功能?
 
阿里云视频点播(VOD)是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速、视频播放于一体的一站式网站及移动端视频点播解决方案。不同于图片使用的阿里云对象存储(OSS),在阿里云上传视频中,我们是基于阿里云视频点播(OSS)来实现的。
在阿里云提供的视频上传服务中,对于前端来说,只有web网页端的javascript上传参考文档,对于目前网站建设中使用较多的vue来说,阿里并没有给出合适的解决方案,大家可以参考以下解决方案。


1.在我们的项目index.html页面引入js支持文件,这些注意版本号的坑,与后端对应。

<script src="../lib/es6-promise.min.js"></script>
 <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来实现视频上传的功能,同时根据自己的需求,大家可以直接返回视频上传地址或传入富文本编辑器进行下一步操作。

本文关键词: vue 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



Copyright © 2017-2020 版权所有:全栈网络工作室 备案号:豫ICP备17039206号-1 HTML网站地图
郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络