vue實現視訊上傳功能
阿新 • • 發佈:2021-04-28
本文例項為大家分享了vue實現視訊上傳功能的具體程式碼,供大家參考,具體內容如下
環境:vue + TS 上傳視訊 + 上傳到阿里雲
主要處理前端在vue下上傳視訊
使用的是阿里雲的視訊點播服務
1、需要後臺去申請一個開發API,請求阿里雲的介面訪問控制
2、有了開發視訊的token,供給前端
3、前端去請求阿里雲端儲存
video.vue
<template> <div class="container"> <el-card> <div slot="header"> <div>課程:</div> <div>階段:</div> <div>課時:</div> </div> <el-form label-width="40px"> <el-form-item label="視訊"> <input ref="video-file"程式設計客棧 type="file" > </el-form-item> <el-form-item label="封面"> <input ref="image-file" type="file" /> </el-form-item> <el-form-item> <el-button type="primary" @click="authUpload" >開始上傳</el-button> <el-button>返回</el-button> </el-form-item> </el-form> </el-card> </div> </template> <script> /* eslint-disable */ import axios from 'axios' import { aliyunImagUploadAddressAdnAuth,aliyunVideoUploadAddressAdnAuth,transCodeVideo,getAliyunTransCodePercent } from '@/services/aliyun-oss' export default { data () { return { uploader: null,videoId: null,imageUrl: '',fileName: '' } },created () { this.initUploader() },methods: { authUpload () { const videoFile = this.$refs['video-file'].files[0] this.uploader.addFile(videoFile,null,'{"Vod":{}}') this.uploader.addFile(this.$refs['image-file'].files[0],'{"Vod":{}}') this.fileName = videoFile.name this.uploader.startUpload() },initUploader () { this.uploader = new window.AliyunUpload.Vod({ // 阿里賬號ID,必須有值 ,值的來源https://help.aliyun.com/knowledge_detail/37196.html userId: 1618139964448548,// 上傳到點播的地域, 預設值為'cn-shanghai',//eu-central-1,ap-southeast-1 region: 'cn-shanghai',// 分片大小預設1M,不能小於100K partSize: 1048576,// 並行上傳分片個數,預設5 parallel: 5,// 網路原因失www.cppcns.com敗時,重新上傳次數,預設為3 retryCount: 3,// 網路原因失敗時,重新上傳間隔時間,預設為2秒 retryDuration: 2,// 開始上傳 onUploadstarted: async uploadInfo程式設計客棧 => { console.log('onUploadstarted',uploadInfo) let uploadAuthInfo = null if (uploadInfo.isImage) { const { data } = await aliyunImagUploadAddressAdnAuth() this.imageUrl = data.data.imageURL uploadAuthInfo = data.data } else { const { data } = await aliyunVideoUploadAddressAdnAuth({ fileName: uploadInfo.file.name }) this.videoId = data.data.videoId uploadAuthInfo = data.data } // console.log('uploadAuthInfo',uploadAuthInfo) this.uploader.setUploadAuthAndAddress( uploadInfo,uploadAuthInfo.uploadAuth,uploadAuthInfo.uploadAddress,uploadAuthInfo.videoId || uploadAuthInfo.imageId ) },// 檔案上傳成功 onUploadSucceed: function (uploadInfo) { console.log('onUploadSucceed',uploadInfo) },// 檔案上傳失敗 onUploadFailed: function (uploadInfo,code,message) { console.log('onUploadFailed')程式設計客棧 },// 檔案上傳進度,單位:位元組 onUploadProgress: function (uploadInfo,totalSize,loadedPercent) { },// 上傳憑證超時 onUploadTokenExpired: function (uploadInfo) { console.log('onUploadTokenExpired') },// 全部檔案上傳結束 onUploadEnd: async uploadInfo => { console.log(uploadInfo) console.log({ lessonId: this.$route.query.lessonId,fileId: this.videoId,coverImageUrl: this.imageUrl,fileName: this.fileName }) const { data } = await transCodeVideo({ lessonId: this.$route.query.lessonId,fileName: this.fileName }) console.log(data) setInterval(async () => { const { data } = await getAliyunTransCodePercent(this.$route.query.lessonId) console.log('轉碼進度',data) },3000) } }) } } } </script>
aliyun-oss.ts,存放介面
/** * 阿里雲上傳 */ import request from '@/utils/request' export const aliyunImagUploadAddressAdnAuth = () => { return request({ method: 'GET',url: '/boss/course/upload/aliyunImagUploadAddressAdnAuth.json' }程式設計客棧) } export const aliyunVideoUploadAddressAdnAuth = (params: any) => { return request({ method: 'GET',url: '/boss/course/upload/aliyunVideoUploadAddressAdnAuth.json',params }) } export const transCodeVideo = (data: any) => { return request({ method: 'POST',url: '/boss/course/upload/aliyunTransCode.json',data }) } export const getAliyunTransCodePercent = (lessonId: string | number) => { return request({ method: 'GET',url: '/boss/course/upload/aliyunTransCodePercent.json',params: { lessonId } }) }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。