使用vue怎么实现一个视频上传功能

本篇文章为大家展示了使用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怎么实现一个视频上传功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。