• 计划经济不是产生于利益交换之上的计划经济。说白了,计划经济就是为人民服务的计划经济。要养活14亿,甚至24亿中国人的经济。 2019-08-16
  • 《陕西省县域经济社会发展监测考评办法》解读 2019-08-15
  • 人民日报召开习近平新闻思想理论研讨会 2019-08-15
  • 境外媒体:中国商务部严批美方“反复无常,挑起贸易战” 2019-08-08
  • 摇滚 徒步 露营:端午节共赴一场朝山盛会 有你吗? 2019-08-06
  • 让办证群众跑十几趟 宁都这黄所长“黄”了 2019-08-06
  • 乌鲁木齐举办端午戏曲交响音乐会 两团一院名角新秀齐亮相 2019-07-31
  • 平陆县纪委监委 对新遴选人员进行岗前“充电” 2019-07-31
  • 临汾市通报8起群众身边腐败问题典型案例 2019-07-29
  • 做强茶企 告别“大而不强” 2019-07-28
  • BBC记者挑战中国天网行人识别系统 潜逃7分钟后被抓获 2019-07-28
  • 首届化工行业舆论风险管理高峰论坛 2019-07-28
  • 回复@老老保老张工:那只能证明你的智商不达标!对于计划经济的构想,咱敢说强坛没有一个人比咱考虑得更周全!伪高工排在一个筋斗云之外! 2019-07-17
  • 燕赵晚报:“选座社交”别把个人信息当卖点 2019-07-17
  • 【访民情 惠民生 聚民心】多措并举拓宽村民脱贫路 2019-07-16
  • 郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

    如何使用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 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



    郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络
  • 计划经济不是产生于利益交换之上的计划经济。说白了,计划经济就是为人民服务的计划经济。要养活14亿,甚至24亿中国人的经济。 2019-08-16
  • 《陕西省县域经济社会发展监测考评办法》解读 2019-08-15
  • 人民日报召开习近平新闻思想理论研讨会 2019-08-15
  • 境外媒体:中国商务部严批美方“反复无常,挑起贸易战” 2019-08-08
  • 摇滚 徒步 露营:端午节共赴一场朝山盛会 有你吗? 2019-08-06
  • 让办证群众跑十几趟 宁都这黄所长“黄”了 2019-08-06
  • 乌鲁木齐举办端午戏曲交响音乐会 两团一院名角新秀齐亮相 2019-07-31
  • 平陆县纪委监委 对新遴选人员进行岗前“充电” 2019-07-31
  • 临汾市通报8起群众身边腐败问题典型案例 2019-07-29
  • 做强茶企 告别“大而不强” 2019-07-28
  • BBC记者挑战中国天网行人识别系统 潜逃7分钟后被抓获 2019-07-28
  • 首届化工行业舆论风险管理高峰论坛 2019-07-28
  • 回复@老老保老张工:那只能证明你的智商不达标!对于计划经济的构想,咱敢说强坛没有一个人比咱考虑得更周全!伪高工排在一个筋斗云之外! 2019-07-17
  • 燕赵晚报:“选座社交”别把个人信息当卖点 2019-07-17
  • 【访民情 惠民生 聚民心】多措并举拓宽村民脱贫路 2019-07-16
  • cba选秀大会 单双中特码准的网址 8加2双色球中6个红球 江苏快三倍投 七乐彩走势图 3d组选选号技巧 百人牛牛游戏心得 管家婆期期准免费资料 排球五大基本技术 体彩p3走势图彩 福建36选7开奖彩票 651675是哪里的号码 中国竟彩 安徽快三走势图100期 新疆25选7号码统计