vue实现视频上传功能

本文实例为大家分享了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 } })}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。