基于Vue+ElementUI+vod-js-sdk-v6，完成騰訊云點播視頻上傳功能

最近做的一個項目，需要用到騰訊云點播的視頻上傳！！寫一個盡可能詳細的博客供各位參考，歡迎指正； ok，下面進入正題。首先是需要用到的依賴：ElementUI、vod-js-sdk-v6、axios

npm i vod-js-sdk-v6npm i axios

import vue from ’vue’import { Upload, Progress } from ’element-ui’vue.use(Upload)vue.use(Progress)

我采用了ElementUI的手動上傳組件，比之自動上傳用戶體驗會更好一點

<template> <div id='upload_video'> <el-upload ref='upload' action='#' :http-request='uploadVideo' //自定義上傳 :accept=’accept’ :limit='1' //上傳的文件數(shù)量 :on-remove='handleRemove' //文件移除事件 :on-change='handleChange' //文件改變事件 :auto-upload='false'> <el-button slot='trigger' size='small' type='primary'>選取視頻</el-button> <el-button size='small' type='success' @click='submitUpload'>點擊上傳</el-button> <el-progress :text-inside='true' :stroke- :percentage='progress' status='exception'></el-progress> <div slot='tip' class='el-upload__tip'>只能上傳mp4文件，且不超過500M</div> </el-upload> <video :src='http://www.aoyou183.cn/bcjs/videoURL' autoplay></video> <img style='width:90px;height:160px;display:none'> </div></template>

接下來是一些變量的定義 以及sdk的引入

import TcVod from ’vod-js-sdk-v6’export default { data () { return { // 文件列表 fileList: [], // 上傳成功后的地址 videoURL: ’’, // 進度條百分比 progress: 0, // base64圖片地址 注：這個是項目需要設置一個默認的視頻封面，不需要的忽略就行 imgBase: ’’, // 上傳視頻獲取成功后拿到的fileID【備用】 fileId: ’’ } }}

最后是具體邏輯

methods: { // 獲取簽名 這里的簽名請求是由后端提供的，只需要拿到后端給的簽名請求即可 getVodSignature () { const url = ’/bpi/artworkMaking/findSingature’ return this.$axios.post(url).then(function (response) { return response.data.data }) }, // 文件列表改變時 將文件列表保存到本地 handleChange (file, fileList) { this.fileList = fileList }, // 點擊上傳時 submitUpload () { if (this.fileList.length < 1) return this.$MessageBox(’請先選取視頻，再進行上傳’, ’提示’) this.uploadVideo() }, // 自定義上傳 uploadVideo (e) { // 當 console.log(this.fileList[0].raw) if (this.fileList.length < 1) { window.alert(’您還沒有選取文件’) } else { //必須以函數(shù)的形式返回 sdk參數(shù)限制 const getSignature = async () => { const data = await this.getVodSignature() return data } const tcVod = new TcVod({ getSignature: getSignature // 獲取上傳簽名的函數(shù) }) // 獲取通過elementui上傳到本地的文件 因為參數(shù)類型必須為file 不能直接以對象的形式傳輸 const mediaFile = this.fileList[0].raw const uploader = tcVod.upload({ mediaFile: mediaFile }) // 監(jiān)聽上傳進度 uploader.on(’media_progress’, info => { this.progress = parseInt(info.percent * 100) }) // 上傳結束時，將url存到本地 uploader.done().then(doneResult => { // 保存地址 // console.log(doneResult) // console.log(this.fileId) this.fileId = doneResult.fileId this.videoURL = doneResult.video.url // 將視頻的第一幀保存為封面 不需要封面的可以直接忽略掉以下代碼 const canvas = document.createElement(’canvas’) const img = document.getElementById(’video_img’) const video = document.getElementById(’video’) video.setAttribute(’crossOrigin’, ’anonymous’) canvas.width = video.clientWidth canvas.height = video.clientHeight video.onloadeddata = (res) => { canvas.getContext(’2d’).drawImage(video, 0, 0, canvas.width, canvas.height) const dataURL = canvas.toDataURL(’image/png’) img.setAttribute(’src’, dataURL) // 拿到base64的字符串，并保存到本地 this.imgBase = dataURL.split(’,’)[1] } }) } }, // 點擊刪除時 handleRemove (file, fileList) { console.log(file, fileList.length) } }

大功告成，需要其他功能的小伙伴請自行參考騰訊云官方demo，去騰訊云文檔官網(wǎng)看，不要看npm！！！ 最后附上成品樣式圖0.0，右邊空白是我預留的視頻預覽區(qū)域

總結

到此這篇關于Vue實現(xiàn)騰訊云點播視頻上傳功能的實現(xiàn)代碼的文章就介紹到這了,更多相關vue騰訊云點播視頻上傳內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！