溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹el-upload實現騰訊云視頻上傳功能的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
起因
根據需求要實現一個視頻上傳功能，之前采用七牛云上傳，小點視頻沒問題，大體積視頻比如600M左右，再考慮到網速等其他原因就會花費半個小時左右。
后來分析到不僅要考慮上傳時間的問題，更重要的是要考慮用戶使用4G 網絡的情況，考慮用戶的流量，線上的視頻，不能不做壓縮轉碼，就放到頁面上，視頻不是圖片，不能甩到 cdn 上就行了。 要考慮視頻大小，pc 移動端適配，轉碼，還有防盜版等問題。最終決定使用騰訊云上傳視頻
在項目中的使用
項目使用vue.js + element-ui el-upload組件
引入sdk：
npm install vod-js-sdk-v6
import TcVod from 'vod-js-sdk-v6'
html代碼
//上傳 <el-upload ref="upload" action="filename" :http-request="httpRequest" :show-file-list="false"> <i v-if="videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i> </el-upload> // 進度條 <el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" ></el-progress>
js代碼
methods:{
// 視頻-自定義地址
httpRequest(file){
const _this = this
// 限制視頻格式
if (["video/mp4", "video/quicktime"].indexOf(file.file.type) == -1) {
this.$message.error("視頻格式有誤，上傳失敗");
return false;
}
// 限制視頻小于700M
const isLt10M = file.file.size / 1024 / 1024 < 700;
if (!isLt10M) {
this.$message.error("請上傳MP4、MOV格式且不超過700MB的視頻哦!");
return false;
}
// 顯示進度條從0開始
_this.videoFlag = true
this.videoUploadPercent=0
// 獲取視頻簽名
const getSignature = async function(){
return await getuploadsignature({ //這里就是發axios請求
video_type:'operating_activity' // 參數是和后臺定義的，不需要可以不寫
}).then(res => {
return res
})
}
// 前文中所述的獲取上傳簽名的函數
const tcVod = new TcVod({
getSignature:getSignature
})
const uploader = tcVod.upload({
mediaFile: file.file // 這里騰訊云需要獲取到file文件里的name，根據你file結構進行填寫
})
this.uploaderG = uploader // 定義全局用于取消上傳
// 進度
uploader.on('media_progress', function(info) {
_this.videoUploadPercent = parseInt(info.percent * 100);
})
// 上傳成功
uploader.done().then((doneResult) => {
_this.videoFlag = false // 關閉進度條
_this.videoForm.Video = doneResult.fileId // 存儲fileId
// 這里發請求給后端進行轉碼操作
const data = {
file_id:doneResult.fileId, // 騰訊云file_id
video_type:'operating_activity', // 視頻類型
video_name:'', // 視頻名稱
video_url: doneResult.video && doneResult.video.url?doneResult.video.url:'',// 視頻地址
}
// 騰訊視頻轉碼
videoProcedure(data)
.then(res => {
}).catch(err => {
console.log(err)
})
}).catch( (err) => {
console.log(err)
})
}
}轉碼需要一定的時間，視頻體積越大轉碼時間越長。
表單提交時將fileId值傳給后端，等需要預覽視頻時，獲取fileId后請求后端的視頻詳情接口，最終播放返回的視頻地址即可。
以上是el-upload實現騰訊云視頻上傳功能的方法的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
