本篇文章为大家展示了使用vue怎么实现一个视频上传功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
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>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.html userId: 1618139964448548, // 上传到点播的地域， 默认值为'cn-shanghai',//eu-central-1,ap-southeast-1 region: 'cn-shanghai', // 分片大小默认1M，不能小于100K partSize: 1048576, // 并行上传分片个数，默认5 parallel: 5, // 网络原因失败时，重新上传次数，默认为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, 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 } })}上述内容就是使用vue怎么实现一个视频上传功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
