阿里云视频点播微服务

悠悠 2024-04-07 15:08 97阅读 0赞

## 文章目录 ##

3. 视频点播微服务

3.1 创建vod服务(需更新)

3.2 vod分类管理

3.2.1 前置技术：定时器 schedule

3.2.2 后端基本结构

3.2.3 定时添加

3.2.4 查询所有分类

3.3 vod转码模板管理

3.3.1 后端基本结构

3.3.2 定时添加

3.3.3 查询所有转码模板

3.4 整合分类和转码模板

3.4.1 需求

3.4.2 ajax操作

3.4.3 数据展示

3.5 视频上传

3.5.1 需求

3.5.2 后端实现

3.5.3 前端实现

## 3. 视频点播微服务 ##

### 3.1 创建vod服务(需更新) ###

*  创建服务：zx-service-vod31
 *  编写pom配置
    
        <?xml version="1.0" encoding="UTF-8"?>
        <project xmlns="http://maven.apache.org/POM/4.0.0"
                 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
            <parent>
                <artifactId>zx-parent20</artifactId>
                <groupId>com.czxy.zx</groupId>
                <version>1.0-SNAPSHOT</version>
            </parent>
            <modelVersion>4.0.0</modelVersion>
        
            <artifactId>zx-service-vod</artifactId>
        
            <dependencies>
                
                <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-web</artifactId>
                </dependency>
                
                <dependency>
                    <groupId>com.alibaba.nacos</groupId>
                    <artifactId>nacos-client</artifactId>
                </dependency>
        
                
                <dependency>
                    <groupId>com.alibaba.cloud</groupId>
                    <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
                </dependency>
        
                
                <dependency>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                    <version>${mybatis.plus.version}</version>
                </dependency>
                
                <dependency>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                </dependency>
        
                
                <dependency>
                    <groupId>com.czxy.zx</groupId>
                    <artifactId>zx-common31</artifactId>
                </dependency>
                <dependency>
                    <groupId>com.czxy.zx</groupId>
                    <artifactId>zx-domain31</artifactId>
                </dependency>
        
                <dependency>
                    <groupId>com.aliyun</groupId>
                    <artifactId>aliyun-java-sdk-core</artifactId>
                    <version>4.5.1</version>
                </dependency>
                <dependency>
                    <groupId>com.aliyun.oss</groupId>
                    <artifactId>aliyun-sdk-oss</artifactId>
                    <version>3.10.2</version>
                </dependency>
                <dependency>
                    <groupId>com.aliyun</groupId>
                    <artifactId>aliyun-java-sdk-vod</artifactId>
                    <version>2.15.11</version>
                </dependency>
                <dependency>
                    <groupId>com.alibaba</groupId>
                    <artifactId>fastjson</artifactId>
                    <version>1.2.28</version>
                </dependency>
                <dependency>
                    <groupId>org.json</groupId>
                    <artifactId>json</artifactId>
                    <version>20170516</version>
                </dependency>
                <dependency>
                    <groupId>com.google.code.gson</groupId>
                    <artifactId>gson</artifactId>
                    <version>2.8.2</version>
                </dependency>
        
                <dependency>
                    <groupId>com.aliyun</groupId>
                    <artifactId>aliyun-sdk-vod-upload</artifactId>
                    <version>1.4.14</version>
                </dependency>
            </dependencies>
        
        
        </project>
 *  编写yml配置
    
        # 服务端口号
        server:
          port: 9030
        # 服务名
        spring:
          application:
            name: vod-service
          datasource:
            driverClassName: com.mysql.jdbc.Driver
            url: jdbc:mysql://127.0.0.1:3306/zx_edu_vod?useUnicode=true&characterEncoding=utf8
            username: root
            password: 1234
          devtools:
            restart:
              enabled: true  #设置开启热部署
              additional-paths: src/main/java #重启目录
              exclude: WEB-INF/**
          cloud:
            nacos:
              discovery:
                server-addr: 127.0.0.1:8848   #nacos服务地址
        
        aliyun:
          video:
            vod:
              keyId: LTAI4GD66m4xsD5e1Qnns9mR
              keySecret: FWPFzljoLDGMiLxCE58xhLykDb3LW4
              regionId: cn-shanghai
              categoryPageSize: 10
        
 *  编写启动类
    
    ![62c6fce908e047889b9ae901959a4f42.png][]
    
        package com.czxy.zx;
        
        import org.springframework.boot.SpringApplication;
        import org.springframework.boot.autoconfigure.SpringBootApplication;
        import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @SpringBootApplication
        @EnableEurekaClient
        public class ZxVodServiceApplication {
            public static void main(String[] args) {
                SpringApplication.run(ZxVodServiceApplication.class,args);
            }
        }
        
 *  拷贝工具类
    
    ![f3b699f8e961476a88499a0c2f43bc56.png][]

### 3.2 vod分类管理 ###

#### 3.2.1 前置技术：定时器 schedule ####

1）入门

![3ab8abca191a4fa0bced069a29c07b76.png][]

*  pom文件，schedule为spring 内置技术，只要保证spring boot基本运行即可
    
           <dependencies>
                
                <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-web</artifactId>
                </dependency>
            </dependencies>
 *  启动类添加注解 `@EnableScheduling`
    
        package com.czxy.zx;
        
        import org.springframework.boot.SpringApplication;
        import org.springframework.boot.autoconfigure.SpringBootApplication;
        import org.springframework.scheduling.annotation.EnableScheduling;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @SpringBootApplication
        @EnableScheduling
        public class ScheduleApplication {
            public static void main(String[] args) {
                SpringApplication.run(ScheduleApplication.class, args);
            }
        }
        
 *  编写定时任务
    
        package com.czxy.zx.schedule;
        
        import org.springframework.scheduling.annotation.Scheduled;
        import org.springframework.stereotype.Component;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Component
        public class TestSchedule {
        
            // 从0秒开始，每3秒执行一次
            @Scheduled(cron = "0/3 * * * * ? ")
            public void testDemo() {
                System.out.println(System.currentTimeMillis());
            }
        }

2）cron表达式

*  cron语法：由7部分组成，第7部分为年，一般不写
    
        秒 分 时 日 月 周 (年)
    
     *  第4位和第6位，至少有一个?
 *  cron 组成取值
    
     *  , 或，例如：1,3,5 ，第1、第3、第5秒
     *  \- 至，例如：3-5，第3、第4、第5秒
     *  \* 任意
     *  / 每，`起始/间隔`，例如：0/3 从0开始，每3秒执行
     *  ? 不指定，因为日期和周冲突
     *  L 最后一个值
     *  W 只能在日期字段设置，表示最近的工作日。15W，例如：15是周六，周五触发。15是周日，下周一触发。15是周二，当天触发。

![e73cfaafb6764719b03224973c890dc9.png][]

*  常见cron表达式
    
        "30 * * * * ?" 第30秒触发任务
        "30 10 * * * ?" 每小时的10分30秒触发任务
        "30 10 1 * * ?" 每天1点10分30秒触发任务
        "30 10 1 20 * ?" 每月20号1点10分30秒触发任务
        "30 10 1 20 10 ? *" 每年10月20号1点10分30秒触发任务
        "30 10 1 20 10 ? 2011" 2011年10月20号1点10分30秒触发任务
        "30 10 1 ? 10 * 2011" 2011年10月每天1点10分30秒触发任务
        "30 10 1 ? 10 SUN 2011" 2011年10月每周日1点10分30秒触发任务
        "15,30,45 * * * * ?" 每15秒，30秒，45秒时触发任务
        "15-45 * * * * ?" 15到45秒内，每秒都触发任务
        "15/5 * * * * ?" 每分钟的每15秒开始触发，每隔5秒触发一次
        "15-30/5 * * * * ?" 每分钟的15秒到30秒之间开始触发，每隔5秒触发一次
        "0 0/3 * * * ?" 每小时的第0分0秒开始，每三分钟触发一次
        "0 15 10 ? * MON-FRI" 星期一到星期五的10点15分0秒触发任务
        "0 15 10 L * ?" 每个月最后一天的10点15分0秒触发任务
        "0 15 10 LW * ?" 每个月最后一个工作日的10点15分0秒触发任务
        "0 15 10 ? * 5L" 每个月最后一个星期四的10点15分0秒触发任务
        "0 15 10 ? * 5#3" 每个月第三周的星期四的10点15分0秒触发任务

3）扩展：Quartz

*  spring boot 自带的定时器简单容易
 *  QuartZ定时器管理灵活，可以动态配置
    
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-quartz</artifactId>
        </dependency>
 *  学习参考

https://blog.csdn.net/upxiaofeng/article/details/79415108

#### 3.2.2 后端基本结构 ####

![9b45b37144db4f499066e3bcfb1403ab.png][]

*  初始化数据库

CREATE DATABASE zx_edu_vod;
    USE zx_edu_vod;
    CREATE TABLE vod_category(
      cate_id BIGINT PRIMARY KEY,
      cate_name VARCHAR(64),
      `level` BIGINT,
      parent_id BIGINT,
      `type` VARCHAR(10) COMMENT '取值：default、material'
    );

*  完善JavaBean

package com.czxy.zx.vod.utils;
    
    import com.baomidou.mybatisplus.annotation.TableField;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.TableName;
    import lombok.Data;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /** vod 分类封装对象（无限极）
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Data
    @TableName("vod_category")
    public class VodCategory {
        @TableId
        private Long cateId;
        private String cateName;
        private Long level;
        private Long parentId;
        private String type;
        @TableField(exist = false)
        private List<VodCategory> children;
    }

*  mapper
    
        package com.czxy.zx.vod.mapper;
        
        import com.baomidou.mybatisplus.core.mapper.BaseMapper;
        import com.czxy.zx.vod.utils.VodCategory;
        import org.apache.ibatis.annotations.Mapper;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Mapper
        public interface VodCategoryMapper extends BaseMapper<VodCategory> {
        }
        
 *  service
    
        package com.czxy.zx.vod.service;
        
        import com.baomidou.mybatisplus.extension.service.IService;
        import com.czxy.zx.vod.utils.VodCategory;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        public interface VodCategoryService extends IService<VodCategory> {
        }
        
    
        package com.czxy.zx.vod.service.impl;
        
        import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
        import com.czxy.zx.vod.mapper.VodCategoryMapper;
        import com.czxy.zx.vod.service.VodCategoryService;
        import com.czxy.zx.vod.utils.VodCategory;
        import org.springframework.stereotype.Service;
        import org.springframework.transaction.annotation.Transactional;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Service
        @Transactional
        public class VodCategoryServiceImpl extends ServiceImpl<VodCategoryMapper, VodCategory> implements VodCategoryService {
        }
        
 *  拷贝配置类
    
    ![86a48f1e9c8c4e6eac8cac25128722d3.png][]

#### 3.2.3 定时添加 ####

*  每个月1号零点更新数据
 *  修改启动类
    
        package com.czxy.zx;
        
        import org.springframework.boot.SpringApplication;
        import org.springframework.boot.autoconfigure.SpringBootApplication;
        import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
        import org.springframework.scheduling.annotation.EnableScheduling;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @SpringBootApplication
        @EnableDiscoveryClient
        @EnableScheduling
        public class ZxVodServiceApplication {
            public static void main(String[] args) {
                SpringApplication.run(ZxVodServiceApplication.class,args);
            }
        }
        
 *  编写定时器处理类
    
    ![b3af92058d224905956e2a919025034f.png][]
    
        package com.czxy.zx.vod.schedule;
        
        import com.czxy.zx.vod.service.VodCategoryService;
        import com.czxy.zx.vod.utils.VideoUtils;
        import com.czxy.zx.vod.utils.VodCategory;
        import org.slf4j.Logger;
        import org.slf4j.LoggerFactory;
        import org.springframework.scheduling.annotation.Scheduled;
        import org.springframework.stereotype.Component;
        
        import javax.annotation.Resource;
        import java.util.List;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Component
        public class CategorySchedule {
        
            @Resource
            private VideoUtils videoUtils;
        
            @Resource
            private VodCategoryService vodCategoryService;
        
            private Logger LOGGER = LoggerFactory.getLogger(CategorySchedule.class);
        
            /**
             * 每月1号零点更新
             */
            @Scheduled(cron = "0 0 0 1 * ?")
            public void handlerCategory() {
                // 1 获得所有分类
                List<VodCategory> categoryList = videoUtils.getCategoryList();
        
                // 2 校验通过后，没有添加
                batchAll(categoryList);
            }
        
            /**
             * 批量处理所有分类，递归处理子分类
             * @param categoryList
             */
            private void batchAll(List<VodCategory> categoryList) {
                System.out.println("处理：" + categoryList.size());
                if(LOGGER.isInfoEnabled()) {
                    LOGGER.info("处理：" + categoryList.size());
                }
                for (VodCategory vodCategory : categoryList) {
                    VodCategory findVodCategory = vodCategoryService.getById(vodCategory.getCateId());
                    if(findVodCategory == null) {
                        vodCategoryService.save(vodCategory);
                        if(LOGGER.isInfoEnabled()) {
                            LOGGER.info("添加：" + vodCategory.getCateId());
                        }
                    } else {
                        // TODO 是否更新？
                    }
                    // 处理孩子
                    batchAll(vodCategory.getChildren());
                }
            }
        }

#### 3.2.4 查询所有分类 ####

![4437b1a13c124046aa0651b024a6a539.png][]

![ec6b16b34315454988b9f0cf1e2a27f0.png][]

package com.czxy.zx.vod.controller;
    
    import com.aliyun.vod.upload.resp.BaseResponse;
    import com.czxy.zx.vo.BaseResult;
    import com.czxy.zx.vod.service.VodCategoryService;
    import com.czxy.zx.vod.utils.VodCategory;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.annotation.Resource;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @RestController
    @RequestMapping("/vodcategory")
    public class VodCategoryController {
        @Resource
        private VodCategoryService vodCategoryService;
    
        @GetMapping
        public BaseResult findAll() {
            //1 查询所有
            List<VodCategory> list = vodCategoryService.list();
    
            //2 处理
            List<VodCategory> categoryList = new ArrayList<>();
            Map<Long,VodCategory> cache = new HashMap<>();
            list.forEach(vodCategory -> {
                if(vodCategory.getParentId() == -1) {
                    categoryList.add(vodCategory);
                } else {
                    VodCategory cacheCategory = cache.get(vodCategory.getParentId());
                    // 初始化计划
                    List<VodCategory> childrenList = cacheCategory.getChildren();
                    if(childrenList == null) {
                        cacheCategory.setChildren(new ArrayList<>());
                    }
                    // 追加数据到集合
                    cacheCategory.getChildren().add(vodCategory);
                }
                cache.put(vodCategory.getCateId(), vodCategory);
            });
    
            //3 返回
            return BaseResult.ok("查询成功", categoryList);
        }
    }

### 3.3 vod转码模板管理 ###

#### 3.3.1 后端基本结构 ####

*  表结构
    
        #转码模板表
        CREATE TABLE vod_template(
          template_id VARCHAR(32) PRIMARY KEY,
          `name` VARCHAR(128) COMMENT '',
          is_default VARCHAR(20) COMMENT '取值：Default、NotDefault',
          transcode_mode VARCHAR(20) COMMENT '取值：NoTranscode、FastTranscode'
        );
 *  JavaBean，修改VodTemplate
    
        package com.czxy.zx.vod.utils;
        
        import com.baomidou.mybatisplus.annotation.IdType;
        import com.baomidou.mybatisplus.annotation.TableId;
        import com.baomidou.mybatisplus.annotation.TableName;
        import lombok.Data;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Data
        @TableName("vod_template")
        public class VodTemplate {
            @TableId(type = IdType.ASSIGN_UUID)
            private String templateId;      //id
            private String name;            //名称
            private String isDefault;       //是否默认，取值：Default、NotDefault
            private String transcodeMode;   //模式，取值：NoTranscode、FastTranscode
        }
        
 *  编写Mapper
    
    ![d9d7e17fee3842b882f2d0d8e0c5db96.png][]
    
        package com.czxy.zx.vod.mapper;
        
        import com.baomidou.mybatisplus.core.mapper.BaseMapper;
        import com.czxy.zx.vod.utils.VodTemplate;
        import org.apache.ibatis.annotations.Mapper;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Mapper
        public interface VodTemplateMapper extends BaseMapper<VodTemplate> {
        }
        
 *  编写service
    
    ![c6aadf35f02e487c98f74aa425aa6d50.png][]
    
        package com.czxy.zx.vod.service.impl;
        
        import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
        import com.czxy.zx.vod.mapper.VodTemplateMapper;
        import com.czxy.zx.vod.service.VodTemplateService;
        import com.czxy.zx.vod.utils.VodTemplate;
        import org.springframework.stereotype.Service;
        import org.springframework.transaction.annotation.Transactional;
        
        /**
         * @author 桐叔
         * @email liangtong@itcast.cn
         */
        @Service
        @Transactional
        public class VodTemplateServiceImpl extends ServiceImpl<VodTemplateMapper, VodTemplate> implements VodTemplateService {
        }

#### 3.3.2 定时添加 ####

![08561148f924463c80ac2536f24d624a.png][]

package com.czxy.zx.vod.schedule;
    
    import com.czxy.zx.vod.service.VodTemplateService;
    import com.czxy.zx.vod.utils.VideoUtils;
    import com.czxy.zx.vod.utils.VodTemplate;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.scheduling.annotation.Scheduled;
    import org.springframework.stereotype.Component;
    
    import javax.annotation.Resource;
    import java.util.List;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @Component
    public class TemplateSchedule {
    
        @Resource
        private VideoUtils videoUtils;
        @Resource
        private VodTemplateService vodTemplateService;
    
        private Logger LOGGER = LoggerFactory.getLogger(TemplateSchedule.class);
    
        /**
         * 每月1号零点更新
         */
        @Scheduled(cron = "0 0 0 1 * ?")
        public void handlerTemplate() {
            // 从阿里云获得所有的转码模板
            List<VodTemplate> transcodeList = videoUtils.getTranscodeList();
            if(LOGGER.isInfoEnabled()) {
                LOGGER.info("处理：" + transcodeList.size());
            }
            // 保存数据
            for (VodTemplate vodTemplate : transcodeList) {
                // 查询
                VodTemplate findTemplate = vodTemplateService.getById(vodTemplate.getTemplateId());
                if(findTemplate == null) {
                    vodTemplateService.save(vodTemplate);
                    if(LOGGER.isInfoEnabled()) {
                        LOGGER.info("添加：" + vodTemplate.getTemplateId());
                    }
                } else {
                    // TODO 更新
                }
            }
        }
    }

#### 3.3.3 查询所有转码模板 ####

![e15721d0442d47b399411e794af3ea49.png][]

![9a173e9d74e1434d80d2b4c37908d527.png][]

package com.czxy.zx.vod.controller;
    
    import com.czxy.zx.vo.BaseResult;
    import com.czxy.zx.vod.service.VodCategoryService;
    import com.czxy.zx.vod.service.VodTemplateService;
    import com.czxy.zx.vod.utils.VodCategory;
    import com.czxy.zx.vod.utils.VodTemplate;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.annotation.Resource;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @RestController
    @RequestMapping("/vodtemplate")
    public class VodTemplateController {
        @Resource
        private VodTemplateService vodTemplateService;
    
        @GetMapping
        public BaseResult findAll() {
            //1 查询所有
            List<VodTemplate> list = vodTemplateService.list();
    
            //3 返回
            return BaseResult.ok("查询成功", list);
        }
    }

### 3.4 整合分类和转码模板 ###

#### 3.4.1 需求 ####

*  级联菜单支持选择任意项的功能

![4dbc3ad3d7e54468ad76e71158990069.png][]

*  转码模板，查询结果为“NoTranscode”，显示处理成“无加密”

#### 3.4.2 ajax操作 ####

*  编写ajax

![736192c7e62d4365bd58e8be01a2218e.png][]

import axios from '@/utils/request'
    
    // 查询所有vod分类
    export function findAllVodCate() {
      return axios.get('/vod-service/vodcategory');
    }
    
    // 保存课程
    export function findAllvodTemp(courseVo) {
      return axios.get('/vod-service/vodtemplate');
    }

*  导入ajax
    
    ![fe0d3726d33b43eba61b9b81a9b5fe29.png][]
    
        import { findAllVodCate, findAllvodTemp } from '@/api/edu/vod'
 *  调用ajax：编写函数
    
     *  声明变量
        
            data() {
                return {
                  vodCategoryList: [],
                  vodTemplateList: [],
                }
            }
     *  编写函数
        
               async findAllVodCategory() {
                  let { data } = await findAllVodCate()
                  this.vodCategoryList = data
                },
                async findAllvodTemplate() {
                  let { data } = await findAllvodTemp()
                  this.vodTemplateList = data
                }
 *  调用ajax：调用函数
    
    ![f5b1edd82daa4b959f55efb3f6634c74.png][]
    
           async nextChapter() {
              // 保存
              let { data,message } = await saveCourse(this.course)
              debugger
              this.$message.success(message)
              // 保存id
              this.course.id = data
              this.active = 2
              // 查询所有章节
              this.findAllChapter()
              // 查询vod分类
              this.findAllVodCategory()
              // 查询vod转码模板
              this.findAllvodTemplate()
            },

#### 3.4.3 数据展示 ####

*  声明变量

data() {
        return {
          vodCategoryProps: {     // vod分类与级联选择对应关系
            value: 'cateId',
            label: 'cateName',
            checkStrictly: true
          },
          vodVideo: {           // vod数据封装对象
    
          }
        }
    }

*  展示数据

<el-form-item label="上传视频" label-width="80px">
        
        <el-row>
          <el-col :span="4" style="text-align:right">
            分类：
          </el-col>
          <el-col :span="20">
            <el-cascader v-model="vodVideo.categoryId" :options="vodCategoryList" :props="vodCategoryProps" style="width:300px"></el-cascader>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="4" style="text-align:right">
            转码模板：
          </el-col>
          <el-col :span="20">
            <el-radio-group >
              <el-radio v-for="(temp,index) in vodTemplateList" :key="index" v-model="vodVideo.templateId" :label="temp.templateId">
                {
      {temp.name == 'NoTranscode' ? '无加密' : temp.name}} {
      {temp.isDefault == 'Default' ? '(默认)' : ''}}
              </el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="4" style="text-align:right">
            选择视频：
          </el-col>
          <el-col :span="20">
            
          </el-col>
        </el-row>
    </el-form-item>

### 3.5 视频上传 ###

#### 3.5.1 需求 ####

![bc87da2454164b69b7adc1968ceb0c10.png][]

#### 3.5.2 后端实现 ####

*  上传视频，并返回视频信息
    
     *  问题：视频上传成功后，阿里云需要一个处理视频的视频，随意不能实时观看。
     *  采取的方案：先上传，再查询视频信息

package com.czxy.zx.vod.controller;
    
    import com.czxy.zx.vo.BaseResult;
    import com.czxy.zx.vod.utils.VideoUtils;
    import com.czxy.zx.vod.utils.VodVideoInfo;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.annotation.Resource;
    
    /**
     * @author 桐叔
     * @email liangtong@itcast.cn
     */
    @RestController
    @RequestMapping("/vodvideo")
    public class VodVideoController {
        @Resource
        private VideoUtils videoUtils;
    
        /**
         * 上传视频
         * @param categoryId
         * @param templateId
         * @param file
         * @return
         */
        @PostMapping("/upload/{categoryId}/{templateId}")
        public BaseResult upload(
                                 @PathVariable("categoryId") Long categoryId,
                                 @PathVariable("templateId") String templateId,
                                 MultipartFile file) {
            // 1 上传
            String videoId = videoUtils.uploadVideo(categoryId, templateId, file);
    
    
            return BaseResult.ok("上传成功", videoId);
        }
    
        /**
         * 查询视频信息
         * @param videoId
         * @return
         */
        @GetMapping("/{videoId}")
        public BaseResult getInfo(@PathVariable("videoId") String videoId) {
            // 2 获得商品信息
            VodVideoInfo playInfo = videoUtils.getPlayInfo(videoId);
            //
            return BaseResult.ok("查询成功", playInfo);
        }
    }

#### 3.5.3 前端实现 ####

*  编写ajax
    
    ![d3ca204ecc9141579b8b9db80f0cdf8c.png][]
    
        // 查询
        export function findVideoInfo(videoId) {
          return axios.get(`/vod-service/vodvideo/${videoId}`);
        }
        
 *  导入ajax
    
    ![a83023182500436ea6a9dd798537af28.png][]

*  编写上传组件
    
         <el-col :span="20">
            
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :before-upload="beforeVideoUpload"
              :on-success="videoUploadSuccess"
              :file-list="videoFileList"
              :limit="1">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
            </el-upload>
            <el-button type="primary" @click="findVodVideoInfo">同步数据</el-button>
            <el-avatar shape="square" :size="50" :src="video.coverURL"></el-avatar> <br/>
            {
            {video}}
          </el-col>
 *  声明变量
    
        data() {
            return {
              videoFileList: [],    // 上传文件列表
              videoId: '0fc9c1413b334b21b1ea48413c4ab35b',          // 视频id
            }
        }
 *  声明函数
    
        methods() {
            beforeVideoUpload() {
              if(!this.vodVideo.categoryId) {
                this.$message.warning('必须选择分类')
                return false
              }
              if(!this.vodVideo.templateId) {
                this.$message.warning('必须选择模板')
                return false
              }
            },
            videoUploadSuccess(response, file, fileList) {
              if(response.code == 0) {
                this.$message.error(response.message)
                this.videoFileList = []
                return
              }
              // 成功
              this.$message.success(response.message)
              // 查询详情
              this.videoId = response.data
              setTimeout(async ()=> {
                this.findVodVideoInfo()
              } , 1000)
            },
            async findVodVideoInfo() {
              let { data } = await findVideoInfo(this.videoId)
              // 设置视频信息
              this.video.coverURL = data.coverURL
              this.video.videoSourceId = data.playURL
              this.video.videoOriginalName = data.title
              console.info(this.video)
            }
        }
 *  动态设置上传路径
    
        computed: {
           uploadUrl() { // 上传路径
              // 如果是数组
              if(Array.isArray(this.vodVideo.categoryId)) {
                // 处理id 获取最后一个分类
                let categoryId = this.vodVideo.categoryId[this.vodVideo.categoryId.length-1]
                // 拼凑上传地址
                return `${process.env.VUE_APP_BASE_API}/vod-service/vodvideo/upload/${categoryId}/${this.vodVideo.templateId}`
              }
              return ""
            }
        }
 *  视频上传成功后，保存video信息时异常，`video_source_id`长度太短
    
        ALTER TABLE edu_video MODIFY COLUMN video_source_id VARCHAR(500)

[62c6fce908e047889b9ae901959a4f42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c4e71120c9cf440f92cc8c58e81eacd6.png
[f3b699f8e961476a88499a0c2f43bc56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/379357ba0f744aa1901b6097184e7fcf.png
[3ab8abca191a4fa0bced069a29c07b76.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/382c81bcc5504247a513c501afa157e9.png
[e73cfaafb6764719b03224973c890dc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/68b1dfc23fd845c3a576dffb587b4c4a.png
[9b45b37144db4f499066e3bcfb1403ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c2cfce685220430d9cce95308ff1bcd2.png
[86a48f1e9c8c4e6eac8cac25128722d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3fea48e9e5954bd08d255cc196adf25e.png
[b3af92058d224905956e2a919025034f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bca20b0e50674a7fbeb40dbdee257382.png
[4437b1a13c124046aa0651b024a6a539.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f9696036ffc44803a8f650abc77f0c55.png
[ec6b16b34315454988b9f0cf1e2a27f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/12f26315c2bb4a65ba5adbc592088735.png
[d9d7e17fee3842b882f2d0d8e0c5db96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8d1d5361687443938a4cee8c39007465.png
[c6aadf35f02e487c98f74aa425aa6d50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ce43baa423354e7d944f4416f32baa59.png
[08561148f924463c80ac2536f24d624a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/579b5e6d598c445b94aafa310efef141.png
[e15721d0442d47b399411e794af3ea49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1eb61e5555c34096bb8c5aaf465ce8d0.png
[9a173e9d74e1434d80d2b4c37908d527.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a46b542bde164e549159069af36a14e3.png
[4dbc3ad3d7e54468ad76e71158990069.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3cea521f1d7b422a877cf7f8a71f5991.png
[736192c7e62d4365bd58e8be01a2218e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2be9c748b9e548e88c0499ee3b734a9a.png
[fe0d3726d33b43eba61b9b81a9b5fe29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b01cddd94a29431d96c1b9a1ab7d7009.png
[f5b1edd82daa4b959f55efb3f6634c74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7e52f1963d2141a99d922144c2c3b6ba.png
[bc87da2454164b69b7adc1968ceb0c10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2ba029219e8746a78de0cf35f8344e22.png
[d3ca204ecc9141579b8b9db80f0cdf8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/39b82613316648148eab16a009679be8.png
[a83023182500436ea6a9dd798537af28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/34fb0d836db64f37a16c82100117ded3.png