• 谷粒学院 —— 10、课程管理：整合阿里云视频点播

    目录

    1、创建模块

    1.1、引入视频点播所需依赖

    1.2、application.properties

    1.3、启动类

    2、实现视频上传

    2.1、后端

    2.1.1、创建常量类

    2.1.2、上传视频到阿里云

    2.2、配置 nginx

    2.3、前端

    2.3.1、上传视频组件

    2.3.2、方法定义

    3、视频删除

    3.1、后端

    3.1.1、初始化阿里云视频点播客户端

    3.1.2、根据视频 ID 删除阿里云视频

    3.2、前端

    3.2.1、定义 API

    3.2.2、定义组件方法

    1、创建模块

    在 service 下创建 service_vod 模块

    1.1、引入视频点播所需依赖

    1.     <dependencies>
    2.         <dependency>
    3.             <groupId>com.aliyungroupId>
    4.             <artifactId>aliyun-java-sdk-coreartifactId>
    5.             <version>4.6.0version>
    6.         dependency>
    7.         <dependency>
    8.             <groupId>com.aliyungroupId>
    9.             <artifactId>aliyun-java-sdk-vodartifactId>
    10.             <version>2.16.11version>
    11.         dependency>
    12.         <dependency>
    13.             <groupId>com.alibabagroupId>
    14.             <artifactId>fastjsonartifactId>
    15.             <version>1.2.83version>
    16.         dependency>
    17.         <dependency>
    18.             <groupId>com.aliyungroupId>
    19.             <artifactId>aliyun-java-sdk-kmsartifactId>
    20.             <version>2.10.1version>
    21.         dependency>
    22.  
    23.         
    24.         <dependency>
    25.             <groupId>com.aliyungroupId>
    26.             <artifactId>aliyun-java-sdk-coreartifactId>
    27.             <version>4.5.1version>
    28.         dependency>
    29.         <dependency>
    30.             <groupId>com.aliyun.ossgroupId>
    31.             <artifactId>aliyun-sdk-ossartifactId>
    32.             <version>3.10.2version>
    33.         dependency>
    34.         <dependency>
    35.             <groupId>com.aliyungroupId>
    36.             <artifactId>aliyun-java-sdk-vodartifactId>
    37.             <version>2.16.11version>
    38.         dependency>
    39.         <dependency>
    40.             <groupId>com.alibabagroupId>
    41.             <artifactId>fastjsonartifactId>
    42.             <version>1.2.83version>
    43.         dependency>
    44.         <dependency>
    45.             <groupId>org.jsongroupId>
    46.             <artifactId>jsonartifactId>
    47.             <version>20170516version>
    48.         dependency>
    49.         <dependency>
    50.             <groupId>com.google.code.gsongroupId>
    51.             <artifactId>gsonartifactId>
    52.             <version>2.8.2version>
    53.         dependency>
    54.         <dependency>
    55.             <groupId>com.aliyungroupId>
    56.             <artifactId>aliyun-sdk-vod-uploadartifactId>
    57.             <version>1.4.15version>
    58.         dependency>
    59.  
    60.         <dependency>
    61.             <groupId>com.baomidougroupId>
    62.             <artifactId>mybatis-plus-boot-starterartifactId>
    63.         dependency>
    64.     dependencies>

    1.2、application.properties

    1. # 服务端口
    2. server.port=8003
    3. # 服务名
    4. spring.application.name=service-vod
    5.  
    6. # 环境设置：dev、test、prod
    7. spring.profiles.active=dev
    8.  
    9. #阿里云 vod
    10. #不同的服务器，地址不同
    11. aliyun.vod.file.keyid=accessKeyId
    12. aliyun.vod.file.keysecret=accessKeySecret
    13.  
    14. # 最大上传单个文件大小：默认1M
    15. spring.servlet.multipart.max-file-size=1024MB
    16. # 最大置总上传的数据大小 ：默认10M
    17. spring.servlet.multipart.max-request-size=1024MB

    1.3、启动类

    1. @SpringBootApplication(exclude = DataSourceAutoConfiguration.class) // 不加载数据库
    2. @ComponentScan(basePackages = {"com.zyj"})  // 扫描包
    3. public class VodApplication {
    4.     public static void main(String[] args) {
    5.         SpringApplication.run(VodApplication.class, args);
    6.     }
    7. }

    2、实现视频上传

    2.1、后端

    2.1.1、创建常量类

    1. @Component
    2. public class ConstantVodUtils implements InitializingBean {
    3.  
    4.     public static String ACCESS_KEY_ID;
    5.     public static String ACCESS_KEY_SECRET;
    6.  
    7.     @Value("${aliyun.vod.file.keyid}")
    8.     private String accessKeyId;
    9.  
    10.     @Value("${aliyun.vod.file.keysecret}")
    11.     private String accessKeySecret;
    12.  
    13.     @Override
    14.     public void afterPropertiesSet() throws Exception {
    15.         ACCESS_KEY_ID = accessKeyId;
    16.         ACCESS_KEY_SECRET = accessKeySecret;
    17.     }
    18. }

    2.1.2、上传视频到阿里云

    VodService

    1. public interface VodService {
    2.  
    3.     /**
    4.      * 上传视频到阿里云
    5.      * @param file 视频文件
    6.      * @return 上传后的视频ID
    7.      */
    8.     String uploadVideo(MultipartFile file);
    9.     
    10. }

    VodServiceImpl

    1. @Service
    2. public class VodServiceImpl implements VodService {
    3.  
    4.     /**
    5.      * 上传视频到阿里云
    6.      * @param file 视频文件
    7.      * @return 上传后的视频ID
    8.      */
    9.     @Override
    10.     public String uploadVideo(MultipartFile file) {
    11.         try {
    12.             String accessKeyId = ConstantVodUtils.ACCESS_KEY_ID;
    13.             String accessKeySecret = ConstantVodUtils.ACCESS_KEY_SECRET;
    14.             String fileName = file.getName();   // 上传文件输入流
    15.             String title = fileName.substring(0, fileName.lastIndexOf("."));;  // 阿里云的文件名
    16.             InputStream inputStream = file.getInputStream();
    17.  
    18.             UploadStreamRequest request = new UploadStreamRequest(accessKeyId, accessKeySecret, title, fileName, inputStream);
    19.  
    20.             UploadVideoImpl uploader = new UploadVideoImpl();
    21.             UploadStreamResponse response = uploader.uploadStream(request);
    22.             String videoId = null;
    23.             if (response.isSuccess()) {
    24.                 videoId = response.getVideoId();
    25.             } else {
    26.                 //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因
    27.                 videoId = response.getVideoId();
    28.             }
    29.             return videoId;
    30.         } catch (Exception e) {
    31.             e.printStackTrace();
    32.             return null;
    33.         }
    34.     }
    35.  
    36. }

    VodController

    1. @RestController
    2. @CrossOrigin
    3. @RequestMapping("/vod/video")
    4. @Api(description="阿里云视频点播微服务")
    5. public class VodController {
    6.  
    7.     @Autowired
    8.     private VodService vodService;
    9.  
    10.     /**
    11.      * 上传视频到阿里云
    12.      * @param file 视频文件
    13.      * @return
    14.      */
    15.     @ApiOperation("上传视频到阿里云")
    16.     @PostMapping("/uploadAliyunVideo")
    17.     public R uploadAliyunVideo(MultipartFile file) {
    18.         String videoId = vodService.uploadVideo(file);
    19.         return R.ok().data("videoId", videoId);
    20.     }
    21.  
    22. }

    2.2、配置 nginx

    在 nginx.conf 中的 server{} 中配置

    1. 		location ~ /vod/ {           
    2. 			proxy_pass http://localhost:8003;
    3. 		}

    在 server{} 的 server_name 下配置

    client_max_body_size 1024m;

    2.3、前端

    2.3.1、上传视频组件

    src\views\edu\course\chapter.vue

    1.                 <el-form-item label="上传视频">
    2.                     <el-upload 
    3.                         :on-success="handleVodUploadSuccess" 
    4.                         :on-remove="handleVodRemove" 
    5.                         :before-remove="beforeVodRemove"
    6.                         :on-exceed="handleUploadExceed" 
    7.                         :file-list="fileList" 
    8.                         :action="BASE_API +'/vod/video/uploadAliyunVideo'" 
    9.                         :limit="1"
    10.                         class="upload-demo"
    11.                     >
    12.                         <el-button size="small" type="primary">上传视频el-button>
    13.                         <el-tooltip placement="right-end">
    14.                             <div slot="content">最大支持1G，<br>
    15.                                 支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
    16.                                 GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
    17.                                 MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
    18.                                 SWF、TS、VOB、WMV、WEBM 等视频格式上传div>
    19.                             <i class="el-icon-question" />
    20.                         el-tooltip>
    21.                     el-upload>
    22.                 el-form-item>

    2.3.2、方法定义

    首先在 data 中定义

    1.                 fileList: [],   //上传文件列表
    2.                 BASE_API: process.env.BASE_API // 接口API地址

    然后定义方法

    1.             /**
    2.              * 上传视频成功调用的方法：赋值上传后视频的ID及文件名
    3.              */
    4.             handleVodUploadSuccess(response, file, fileList) {
    5.                 this.video.videoSourceId = response.data.videoId;
    6.                 this.video.videoOriginalName = file.name;
    7.             },
    8.  
    9.             // 试图上传多于一个视频
    10.             handleUploadExceed(files, fileList) {
    11.                 this.$message.warning('想要重新上传视频，请先删除已上传的视频');
    12.             },

    3、视频删除

    3.1、后端

    3.1.1、初始化阿里云视频点播客户端

    1. public class InitVodClient {
    2.  
    3.     /**
    4.      * 初始化阿里云视频点播客户端
    5.      * @param accessKeyId
    6.      * @param accessKeySecret
    7.      * @return
    8.      * @throws ClientException
    9.      */
    10.     public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
    11.         String regionId = "cn-shanghai";  // 点播服务接入地域
    12.         DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
    13.         DefaultAcsClient client = new DefaultAcsClient(profile);
    14.         return client;
    15.     }
    16.  
    17. }

    3.1.2、根据视频 ID 删除阿里云视频

    官方文档：媒资管理

    1.     /**
    2.      * 根据视频ID删除阿里云中的视频
    3.      * @param videoId
    4.      * @return
    5.      */
    6.     @DeleteMapping("/{videoId}")
    7.     public R deleteAliyunVideo(
    8.             @ApiParam(name = "videoId", value = "视频ID", required = true) @PathVariable String videoId
    9.     ) {
    10.         try {
    11.             // 初始化客户端
    12.             DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);
    13.  
    14.             // 创建删除视频 request 对象
    15.             DeleteVideoRequest request = new DeleteVideoRequest();
    16.  
    17.             // 像 request 对象设置视频ID
    18.             request.setVideoIds(videoId);
    19.  
    20.             // 调用初始化对象方法实现删除
    21.             client.getAcsResponse(request);
    22.  
    23.             return R.ok();
    24.         } catch (Exception e) {
    25.             e.printStackTrace();
    26.             throw new GuliException(20001, "删除视频失败");
    27.         }
    28.     }

    3.2、前端

    3.2.1、定义 API

    src\api\edu\video.js

    1.     /**
    2.      * 根据视频ID删除阿里云中的视频
    3.      * @param {*} videoId 
    4.      * @returns 
    5.      */
    6.     deleteAliyunVod(videoId) {
    7.         return request({
    8.             url: `/vod/video/${videoId}`,
    9.             method: 'DELETE',
    10.         })
    11.     }

    3.2.2、定义组件方法

    1.             /**
    2.              * 上传视频时删除列表中的视频
    3.              */
    4.             beforeVodRemove(file, fileList) {
    5.                 return this.$confirm(`确定移除 ${file.name}？`);
    6.             },
    7.  
    8.             /**
    9.              * 根据视频ID删除阿里云中的视频
    10.              */
    11.             handleVodRemove() {
    12.                 video.deleteAliyunVod(this.video.videoSourceId)
    13.                     // 删除成功
    14.                     .then(response => {
    15.                         // 提示信息
    16.                         this.$message({
    17.                             type: 'success',
    18.                             message: '删除视频成功!'
    19.                         });
    20.  
    21.                         // 清空文件列表
    22.                         this.fileList = [];
    23.  
    24.                         // 初始化小节中的视频ID和名称
    25.                         this.video.videoSourceId = '';
    26.                         this.video.videoOriginalName = '';
    27.                     })
    28.                     // 删除失败
    29.                     .catch(() => {
    30.                         this.$message({
    31.                             type: 'info',
    32.                             message: '已取消删除'
    33.                         });
    34.                     });
    35.             }

  • 相关阅读:
    C语言：结构体
    分布式事务的应用场景
    hadoop伪分布式安装部署
    用Python实现感知机学习算法及其对偶算法实验报告
    ImageEn FMX内置图像效果对话框
    Golang 程序漏洞检测利器 govulncheck（二）：漏洞数据库详解
    SpringBoot 单体服务集成nacos
    C# 程序开机自动启动
    IP地址怎么实现https
    React技巧之打开文件输入框
  • 原文地址：https://blog.csdn.net/Mr_zhangyj/article/details/127850945