本文實例為大家分享了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, null, null, ’{'Vod':{}}’) this.uploader.addFile(this.$refs[’image-file’].files[0], null, null, null, ’{'Vod':{}}’) this.fileName = videoFile.name this.uploader.startUpload() }, initUploader () { this.uploader = new window.AliyunUpload.Vod({// 阿里賬號ID，必須有值 ，值的來源https://help.aliyun.com/knowledge_detail/37196.htmluserId: 1618139964448548,// 上傳到點播的地域， 默認值為’cn-shanghai’,//eu-central-1,ap-southeast-1region: ’cn-shanghai’,// 分片大小默認1M，不能小于100KpartSize: 1048576,// 并行上傳分片個數，默認5parallel: 5,// 網絡原因失敗時，重新上傳次數，默認為3retryCount: 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, fileId: this.videoId, coverImageUrl: this.imageUrl, 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 } })}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。