阅读 136

Vue 腾讯云视频上传

Vue 腾讯云视频上传

接上一篇,这里的后台项目,视频上传到腾讯云以后,生成的地址用来给 IOS、安卓调用显示。


引入 SDK , 安装 vod-js-sdk-v6


npm i vod-js-sdk-v6 -S

 

会多处调用,在 main.js 将 TcVod 设置成全局对象


import TcVod from 'vod-js-sdk-v6'

 

Vue.prototype.$TcVod = TcVod

用Element-ui  的上传组件


<el-form-item label="活动介绍视频" prop="videoIntro" :rules="[{ required: true, message: '请上传活动介绍视频'}]">

    <el-col :span="9">

        <el-upload class="upload-unit" :http-request="videoSuccess" action="" :limit="1" list-type="text" :file-list="topic.videoIntro" accept="video/*">

            <el-button size="small" type="primary">点击上传</el-button>

        </el-upload>

    </el-col>

</el-form-item>

引入 封装的 mixins 


import { upload } from '@/components/mixins'

export default {

    mixins:[ upload ],

    methods:{

    videoSuccess(file){

        this.videoUpload(file,"topic","videoIntro")

    }

}

getVideoSecret 取临时密钥


videoUpload 用传来的 file、临时密钥 实现视频上传,同时设置对应的值、触发校验


module.exports = {

    upload:{       

            getVideoSecret(){

                return this.$fetch.videoTempSecret().then( response => {

                    return response.data.data

                })

            },

            videoUpload(file,main,key,index,subkey){

                let _this = this

                const tcVod = new this.$TcVod({

                    getSignature:this.getVideoSecret

                })

                const uploader = tcVod.upload({

                    mediaFile: file.file

                })

                uploader.done().then((doneResult)=>{

                    if(subkey){

                        _this[main][key][index][subkey]  =  [{name:doneResult.video.url.slice(doneResult.video.url.lastIndexOf("/")+1), url:doneResult.video.url}]

                        _this.$refs[key + index][0].validateField(subkey)

                    }

                    else{

                        _this[main][key] =  [{name:doneResult.video.url.slice(doneResult.video.url.lastIndexOf("/")+1), url:doneResult.video.url}]

                        _this.$refs[main].validateField(key)

                    }

                }).catch(function (err) {

                    _this.$message.error("上传失败")

                })

            }

        }

    }

}

有问题,可Q我:770703721  

————————————————

版权声明:本文为CSDN博主「唐鹏程」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/sinat_36539161/article/details/108367266


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐