• 回复@海之宁:不给你分配生产资料你咋尽所能? 2019-06-18
  • 霍金说,广义相对论的爱因斯坦方程“将和宇宙同在”。而“真理论者”在人民网上公开辱骂爱因斯坦是“极度残脑”,乃狂犬吠日。 2019-06-18
  • 习近平:在深入推动长江经济带发展座谈会上的讲话 2019-06-15
  • 平话文化旅游节又来了!乐游扬美古镇嗨购江南万达 2019-06-15
  • 【老蚕】,可分为;【轻度老蚕,重度老蚕,全面脑瘫】三个等级。试想;你是属于哪个级别。。。?[福尔摩斯] 2019-06-04
  • 【人事】中共临汾市委组织部公示3名拟任职干部 2019-06-04
  • 西部网(陕西新闻网)www.cnwest.com 2019-06-02
  • 交通部发布端午假期出行指南 教你如何避堵 2019-06-02
  • 共产主义劳动不再是谋生手段就是劳动不再是看着就想笑鼓吹私有制下的责权利所谓平滑对接下的为生存而做资本的雇佣劳动奴隶劳动,而是在共产主义公有制里劳动由于一辈子做 2019-06-02
  • 李克强:今年再减少农村贫困人口1000万以上 2019-06-01
  • 台湾如何管理“路边摊” 2019-06-01
  • 看河北绿水青山咋变金山银山? 2019-05-31
  • 税费“红包”助推高质量发展 2019-05-31
  • 围绕茶叶基础领域重大问题开展研究(创新故事) 2019-05-26
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-05-26
  • 郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

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

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

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

    四川快乐12前三走势图 www.mas07.com 网站建设项目开发中,我们一般都采用了服务器更稳定,技术及服务更完善的阿里云作为我们的硬件基础,那么基于阿里云的视频传输存储服务,我们如何使用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 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



    郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络
  • 回复@海之宁:不给你分配生产资料你咋尽所能? 2019-06-18
  • 霍金说,广义相对论的爱因斯坦方程“将和宇宙同在”。而“真理论者”在人民网上公开辱骂爱因斯坦是“极度残脑”,乃狂犬吠日。 2019-06-18
  • 习近平:在深入推动长江经济带发展座谈会上的讲话 2019-06-15
  • 平话文化旅游节又来了!乐游扬美古镇嗨购江南万达 2019-06-15
  • 【老蚕】,可分为;【轻度老蚕,重度老蚕,全面脑瘫】三个等级。试想;你是属于哪个级别。。。?[福尔摩斯] 2019-06-04
  • 【人事】中共临汾市委组织部公示3名拟任职干部 2019-06-04
  • 西部网(陕西新闻网)www.cnwest.com 2019-06-02
  • 交通部发布端午假期出行指南 教你如何避堵 2019-06-02
  • 共产主义劳动不再是谋生手段就是劳动不再是看着就想笑鼓吹私有制下的责权利所谓平滑对接下的为生存而做资本的雇佣劳动奴隶劳动,而是在共产主义公有制里劳动由于一辈子做 2019-06-02
  • 李克强:今年再减少农村贫困人口1000万以上 2019-06-01
  • 台湾如何管理“路边摊” 2019-06-01
  • 看河北绿水青山咋变金山银山? 2019-05-31
  • 税费“红包”助推高质量发展 2019-05-31
  • 围绕茶叶基础领域重大问题开展研究(创新故事) 2019-05-26
  • 宝贝是地名,你能想到这么浪漫的地名在哪儿吗? 2019-05-26