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