基于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' //上傳的文件數量 :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://m.4tl426be.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 { //必須以函數的形式返回 sdk參數限制 const getSignature = async () => { const data = await this.getVodSignature() return data } const tcVod = new TcVod({ getSignature: getSignature // 獲取上傳簽名的函數 }) // 獲取通過elementui上傳到本地的文件 因為參數類型必須為file 不能直接以對象的形式傳輸 const mediaFile = this.fileList[0].raw const uploader = tcVod.upload({ mediaFile: mediaFile }) // 監聽上傳進度 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，去騰訊云文檔官網看，不要看npm！！！ 最后附上成品樣式圖0.0，右邊空白是我預留的視頻預覽區域

總結

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