day09项目【课程列表和整合阿里云视频点播】
1 课程列表和课程删除
01-课程列表的显示
课程列表显示：
课程列表（参考讲师列表，完善条件查询和分页）：
一、后端实现
1、定义搜索对象
CourseQuery：
@ApiModel(value = "Course查询对象", description = "课程查询对象封装")
@Data
public class CourseQuery {
@ApiModelProperty(value = "课程名称")
private String title;
@ApiModelProperty(value = "讲师id")
private String teacherId;
@ApiModelProperty(value = "一级类别id")
private String subjectParentId;
@ApiModelProperty(value = "二级类别id")
private String subjectId;
}
2、定义web层方法
//条件查询带分页的方法
@ApiOperation(value = "分页课程列表")
@PostMapping("pageCourseCondition/{current}/{limit}")
public R pageCourseCondition(@ApiParam(name = "current", value = "当前页码", required = true) @PathVariable long current,
@ApiParam(name = "limit", value = "每页记录数", required = true) @PathVariable long limit,
@RequestBody(required = false) CourseQuery courseQuery){
//创建page对象
Page<EduCourse> pageParam = new Page<>(current,limit);
courseService.pageQuery(pageParam,courseQuery);
List<EduCourse> records = pageParam.getRecords();
long total = pageParam.getTotal();
//调用方法实现条件查询分页
return R.ok().data("rows",records).data("total",total);
}
3、定义service方法
接口
void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery);
实现
@Override
public void pageQuery(Page<EduCourse> pageParam, CourseQuery courseQuery) {
//构建条件
QueryWrapper<EduCourse> courseQueryWrapper = new QueryWrapper<>();
courseQueryWrapper.orderByDesc("gmt_create");
//wrapper
if (courseQuery == null){
baseMapper.selectPage(pageParam,courseQueryWrapper);
return;
}
String title = courseQuery.getTitle();
String teacherId = courseQuery.getTeacherId();
String subjectParentId = courseQuery.getSubjectParentId();
String subjectId = courseQuery.getSubjectId();
if (!StringUtils.isEmpty(title)){
courseQueryWrapper.like("title",title);
}
if (!StringUtils.isEmpty(teacherId)){
courseQueryWrapper.eq("teacher_id",teacherId);
}
if (!StringUtils.isEmpty(subjectParentId)){
courseQueryWrapper.eq("subject_parent_id",subjectParentId);
}
if (!StringUtils.isEmpty(subjectId)){
courseQueryWrapper.eq("subject_id",subjectId);
}
baseMapper.selectPage(pageParam,courseQueryWrapper);
}
二、前端分页查询列表
1、定义api
course.js
//课程列表（条件查询分页）
//current当前页，limit每页记录数，teacherQuery条件对象
getCoursePageList(current,limit,courseQuery){
return request({
url:`/eduservice/course/pageCourseCondition/${current}/${limit}`,
method:'post',
data:courseQuery
})
}
2、组件中的js
src/views/edu/list.vue
<script>
import course from '@/api/edu/course'
import teacher from '@/api/edu/teacher'
import subject from '@/api/edu/subject'
export default {
data(){
return {
listLoading: true, // 是否显示loading信息
list:null,
page:1,//当前页
limit:10,//每页记录数
total:0,//总记录数
courseQuery:{},//条件封装对象
teacherList: [], // 讲师列表
subjectNestedList: [], // 一级分类列表
subSubjectList: [] // 二级分类列表,
}
},
created(){
this.getList()
// 初始化分类列表
this.initSubjectList()
// 获取讲师列表
this.initTeacherList()
},
methods:{
getList(page=1) {
this.page = page
this.listLoading = true
course.getCoursePageList(this.page,this.limit,this.courseQuery)
.then(response=>{
if (response.success === true) {
this.list = response.data.rows
this.total = response.data.total
}
this.listLoading = false
})
.catch(error =>{//请求失败
console.log(error)
})
},
initTeacherList() {
teacher.getTeacherList()
.then(response => {
this.teacherList = response.data.items
})
},
initSubjectList() {
subject.getSubjectList()
.then(response => {
this.subjectNestedList = response.data.list
})
},
subjectLevelOneChanged(value){
for (let i = 0; i < this.subjectNestedList.length; i++) {
if (this.subjectNestedList[i].id === value) {
this.subSubjectList = this.subjectNestedList[i].children
this.searchObj.subjectId = ''
}
}
},
resetData(){//清空方法
//表单输入项数据清空
this.courseQuery = {}
this.subSubjectList = [] // 二级分类列表
//查询所有讲师数据
this.getList()
},
}
}
</script>
3、组件模板
查询表单、表格和分页：表格添加了 row-class-name="myClassList" 样式定义
<template>
<div class="app-container">
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<!-- 所属分类：级联下拉列表 -->
<!-- 一级分类 -->
<el-form-item label="课程类别">
<el-select
v-model="courseQuery.subjectParentId"
placeholder="请选择"
@change="subjectLevelOneChanged">
<el-option
v-for="subject in subjectNestedList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
<!-- 二级分类 -->
<el-select v-model="courseQuery.subjectId" placeholder="请选择">
<el-option
v-for="subject in subSubjectList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
</el-form-item>
<!-- 标题 -->
<el-form-item>
<el-input v-model="courseQuery.title" placeholder="课程标题"/>
</el-form-item>
<!-- 讲师 -->
<el-form-item>
<el-select
v-model="courseQuery.teacherId"
placeholder="请选择讲师">
<el-option
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"/>
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
<!-- 表格 -->
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="数据加载中"
border
fit
highlight-current-row
row-class-name="myClassList">
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column label="课程信息" width="470" align="center">
<template slot-scope="scope">
<div class="info">
<div class="pic">
<img :src="scope.row.cover" alt="scope.row.title" width="150px">
</div>
<div class="title">
<a href="">{{ scope.row.title }}</a>
<p>{{ scope.row.lessonNum }}课时</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="scope">
{{ scope.row.gmtCreate.substr(0, 10) }}
</template>
</el-table-column>
<el-table-column label="发布时间" align="center">
<template slot-scope="scope">
{{ scope.row.gmtModified.substr(0, 10) }}
</template>
</el-table-column>
<el-table-column label="价格" width="100" align="center" >
<template slot-scope="scope">
{{ Number(scope.row.price) === 0 ? '免费' :
'¥' + scope.row.price.toFixed(2) }}
</template>
</el-table-column>
<el-table-column prop="buyCount" label="付费学员" width="100" align="center" >
<template slot-scope="scope">
{{ scope.row.buyCount }}人
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<router-link :to="'/edu/course/info/'+scope.row.id">
<el-button type="text" size="mini" icon="el-icon-edit">编辑课程信息</el-button>
</router-link>
<router-link :to="'/edu/course/chapter/'+scope.row.id">
<el-button type="text" size="mini" icon="el-icon-edit">编辑课程大纲</el-button>
</router-link>
<el-button type="text" size="mini" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getList"
/>
</div>
</template>
4、css的定义
<style scoped>
.myClassList .info {
width: 450px;
overflow: hidden;
}
.myClassList .info .pic {
width: 150px;
height: 90px;
overflow: hidden;
float: left;
}
.myClassList .info .pic a {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.myClassList .info .pic img {
display: block;
width: 100%;
}
.myClassList td .info .title {
width: 280px;
float: right;
height: 90px;
}
.myClassList td .info .title a {
display: block;
height: 48px;
line-height: 24px;
overflow: hidden;
color: #00baf2;
margin-bottom: 12px;
}
.myClassList td .info .title p {
line-height: 20px;
margin-top: 5px;
color: #818181;
}
</style>
分页失败原因：
测试：
编辑：即可完成点击“编辑课程信息”和“编辑课程大纲”跳转到相应的页面进行编辑
02-删除课程
一、后端实现
1、web层
定义删除api方法:EduCourseController.java
//根据ID删除课程
@ApiOperation(value = "根据ID删除课程")
@DeleteMapping("deleteCourse/{courseId}")
public R deleteCourse(@ApiParam(name = "id", value = "课程ID", required = true)
@PathVariable String courseId){
courseService.removeCourse(courseId);
return R.ok();
}
2、service层
如果用户确定删除，则首先删除video记录，然后删除chapter记录，最后删除Course记录
//当前在课程实现类EduCourseServiceImpl中，删除小节和章节需要在其实现类中删除，因此首先将相关的Service进行注入
@Autowired
private EduVideoService videoService;
@Autowired
private EduChapterService chapterService;
2.1、在VideoService中定义根据courseId删除video业务方法
接口：
void removeVideoByCourseId(String courseId);
实现：
// 1 根据课程id删除小节
//TODO 删除小节，删除对应视频文件
@Override
public void removeVideoByCourseId(String courseId) {
//需要根据小节id进行删除，但是传递过来的是课程id，因此需要传递对象
QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
wrapper.eq("course_id",courseId);
baseMapper.delete(wrapper);
}
2.2、在ChapterService中定义根据courseId删除chapter业务方法
接口：
void removeChapterByCourseId(String courseId);
实现：
//根据课程id删除章节
@Override
public void removeChapterByCourseId(String courseId) {
QueryWrapper<EduChapter> wrapper = new QueryWrapper<>();
wrapper.eq("course_id",courseId);
baseMapper.delete(wrapper);
}
2.3、删除当前course记录
接口：CourseService.java
//根据ID删除课程
void removeCourse(String courseId);
实现：CourseServiceImpl.java
//根据ID删除课程
@Override
public void removeCourse(String courseId) {
//1 根据课程id删除小节
videoService.removeVideoByCourseId(courseId);
//2 根据课程id删除章节
chapterService.removeChapterByCourseId(courseId);
//3 根据课程id删除描述
courseDescriptionService.removeById(courseId);
//4 根据课程id删除课程本身
int result = baseMapper.deleteById(courseId);
if(result == 0) { //失败返回
throw new GuliException(20001,"删除失败");
}
}
测试：
测试删除失败：
成功：
二、前端实现
删除按钮（完善）：
1、定义api
course.js中添加删除方法
//根据ID删除课程
removeById(courseId){
return request({
url:`/eduservice/course/deleteCourse/${courseId}`,
method:'delete'
})
}
2、修改删除按钮
src/api/edu/course.js 删除按钮注册click事件
<el-button type="text" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
3、编写删除方法
removeDataById(id){
// debugger
this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return course.removeById(id)
}).then(() => {
this.getList()
this.$message({
type: 'success',
message: '删除成功!'
})
}).catch((response) => { // 失败
if (response === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
})
}
})
},
2 阿里云视频点播
01-视频点播简介
一、阿里云视频点播技术能力盘点
参考文章：
https://blog.csdn.net/qq_33857573/article/details/79564255
视频点播（ApsaraVideo for VoD）是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速于一体的一站式音视频点播解决方案。
1、应用场景
音视频网站：无论是初创视频服务企业，还是已拥有海量视频资源，可定制化的点播服务帮助客户快速搭建拥有极致观看体验、安全可靠的视频点播应用。
短视频：集音视频拍摄、特效编辑、本地转码、高速上传、自动化云端转码、媒体资源管理、分发加速、播放于一体的完整短视频解决方案。目前已帮助1000+APP快速实现手机短视频功能。
直播转点播：将直播流同步录制为点播视频，用于回看。并支持媒资管理、媒体处理（转码及内容审核/智能首图等AI处理）、内容制作（云剪辑）、CDN分发加速等一系列操作。
在线教育：为在线教育客户提供简单易用、安全可靠的视频点播服务。可通过控制台/API等多种方式上传教学视频，强大的转码能力保证视频可以快速发布，覆盖全网的加速节点保证学生观看的流畅度。防盗链、视频加密等版权保护方案保护教学内容不被窃取。
视频生产制作：提供在线可视化剪辑平台及丰富的OpenAPI，帮助客户高效处理、制作视频内容。除基础的剪切拼接、混音、遮标、特效、合成等一系列功能外，依托云剪辑及点播一体化服务还可实现标准化、智能化剪辑生产，大大降低视频制作的槛，缩短制作时间，提升内容生产效率。
内容审核：应用于短视频平台、传媒行业审核等场景，帮助客户从从语音、文字、视觉等多维度精准识别视频、封面、标题或评论的违禁内容进行AI智能审核与人工审核。
2、功能介绍
二、开通视频点播云平台
1、选择视频点播服务
产品->企业应用->视频云->视频点播
2、开通视频点播
3、选择按使用流量计费
4、资费说明
https://www.aliyun.com/price/product?spm=a2c4g.11186623.2.12.7fbd59b9vmXVN6#/vod/detail
后付费
套餐包
欠费说明
计费案例：https://help.aliyun.com/document_detail/64032.html?spm=a2c4g.11186623.4.3.363db1bcfdvxB5
5、整体流程
使用视频点播实现音视频上传、存储、处理和播放的整体流程如下：
用户获取上传授权。
VoD下发 上传地址和凭证 及 VideoId。
用户上传视频保存视频ID(VideoId)。
用户服务端获取播放凭证。
VoD下发带时效的播放凭证。
用户服务端将播放凭证下发给客户端完成视频播放。
三、视频点播服务的基本使用
完整的参考文档
https://help.aliyun.com/product/29932.html?spm=a2c4g.11186623.6.540.3c356a58OEmVZJ
1、设置转码格式
选择全局设置 > 转码设置，单击添加转码模板组。
在视频转码模板组页面，根据业务需求选择封装格式和清晰度。
或直接将已有的模板设置为默认即可
2、分类管理
选择全局设置 > 分类管理
3、上传视频文件
选择媒资库 > 音视频，单击上传音视频
4、配置域名
音视频上传完成后，必须配一个已备案的域名，并完成CNAME绑定
得到CNAME
在购买域名的服务商处的管理控制台配置域名解析
5、在控制台查看视频
此时视频可以在阿里云控制台播放
6、获取web播放器代码
阿里云视频点播概念：
之前上传文件，保存的是上传文件之后的地址，但是在小节中保存视频的时候，而是保存的是视频的id，并不保存视频的地址，这是因为如果视频没有进行加密保存地址是可以的，但是如果视频加密，加密视频地址是不能播放的，在实际项目中，视频是需要加密的。
如果视频不进行加密，那别人得到地址那视频就可以播放，可以不付费就可以观看。
保存的是视频的id既可以得到视频播放的地址，也可以得到视频播放的凭证（既可以播放加密视频也可以播放不加密视频）。
02-使用服务端SDK
一、服务端SDK
1、简介
sdk的方式将api进行了进一步的封装，不用自己创建工具类。
我们可以基于服务端SDK编写代码来调用点播API，实现对点播产品和服务的快速操作。
2、功能介绍
SDK封装了对API的调用请求和响应，避免自行计算较为繁琐的 API签名。
支持所有点播服务的API，并提供了相应的示例代码。
支持7种开发语言，包括：Java、Python、PHP、.NET、Node.js、Go、C/C++。
通常在发布新的API后，我们会及时同步更新SDK，所以即便您没有找到对应API的示例代码，也可以参考旧的示例自行实现调用。
二、使用SDK
在service创建子模块service_ vod ，引入相关依赖到3 整合阿里云视频点播 01-视频点播微服务的创建笔记进行复制
1、安装
参考文档：https://help.aliyun.com/document_detail/57756.html
添加maven仓库的配置和依赖到pom
<repositories>
<repository>
<id>sonatype-nexus-staging</id>
<name>Sonatype Nexus Staging</name>
<url>https://oss.sonatype.org/service/local/staging/deploy/maven2/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<dependencies>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-core</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
</dependency>
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-java-sdk-vod</artifactId>
</dependency>
<!-- <dependency>-->
<!-- <groupId>com.aliyun</groupId>-->
<!-- <artifactId>aliyun-sdk-vod-upload</artifactId>-->
<!-- </dependency>-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
</dependency>
<dependency>
<groupId>joda-time</groupId>
<artifactId>joda-time</artifactId>
</dependency>
</dependencies>
2、初始化
public class InitObject {
public static DefaultAcsClient initVodClient(String accessKeyId, String accessKeySecret) throws ClientException {
String regionId = "cn-shanghai"; // 点播服务接入区域
DefaultProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
DefaultAcsClient client = new DefaultAcsClient(profile);
return client;
}
}
3、获取视频播放地址
public class VodSdkTest {
public static void main(String[] args) throws Exception {
//1 根据视频id获取视频播放地址
//获取初始化对象
DefaultAcsClient client = InitObject.initVodClient("LTAI4GKJXUR4VuFMrtnzzWBG","yiEPUWzpivYpYTG8o0tVW4UFqE2EQh");
//创建获取视频地址的request和response
GetPlayInfoResponse response = new GetPlayInfoResponse();
GetPlayInfoRequest request = new GetPlayInfoRequest();
//向request对象里面设置视频id
request.setVideoId("7d92de4882d44b24985862e5c368b195");
//调用初始化对象里面的方法，传递request,获取数据
response = client.getAcsResponse(request);
List<GetPlayInfoResponse.PlayInfo> playInfoList = response.getPlayInfoList();
//播放地址
for (GetPlayInfoResponse.PlayInfo playInfo : playInfoList) {
System.out.print("PlayInfo.PlayURL = " + playInfo.getPlayURL() + "\n");
}
//Base信息
System.out.print("VideoBase.Title = " + response.getVideoBase().getTitle() + "\n");
}
}
https://help.aliyun.com/document_detail/61064.html?spm=a2c4g.11186623.6.910.65487bdcUJ2Djx
4、获取视频播放凭证
public class VodSdkTest {
public static void main(String[] args) throws Exception {
//根据视频id获取视频播放凭证
//初始化客户端、请求对象和相应对象
DefaultAcsClient client = InitObject.initVodClient("LTAI4GKJXUR4VuFMrtnzzWBG","yiEPUWzpivYpYTG8o0tVW4UFqE2EQh");
GetVideoPlayAuthResponse response = new GetVideoPlayAuthResponse();
GetVideoPlayAuthRequest request = new GetVideoPlayAuthRequest();
request.setVideoId("7d92de4882d44b24985862e5c368b195");
response = client.getAcsResponse(request);
System.out.print("PlayAuth = " + response.getPlayAuth() + "\n");
}
}
03-文件上传测试
参考文档：https://help.aliyun.com/document_detail/53406.html
一、安装SDK
1、配置pom
2、安装非开源jar包
在本地Maven仓库中安装jar包：
下载视频上传SDK，解压，命令行进入lib目录，执行以下代码
mvn install:install-file-DgroupId=com.aliyun-DartifactId=aliyun-sdk-vod-upload-Dversion=1.4.11-Dpackaging=jar-Dfile=aliyun-java-vod-upload-1.4.11.jar
把该文件下的生成的包复制到工作目录下：
然后在pom中引入jar包，版本号已经在整个项目的pom中指定
<dependency>
<groupId>com.aliyun</groupId>
<artifactId>aliyun-sdk-vod-upload</artifactId>
</dependency>
二、测试
1、创建测试文件
2、测试本地文件上传
public class VodSdkTest {
public static void main(String[] args) throws Exception {
//本地文件上传接口
String accessKeyId = "LTAI4GKJXUR4VuFMrtnzzWBG";
String accessKeySecret = "yiEPUWzpivYpYTG8o0tVW4UFqE2EQh";
String title = "6 - What If I Want to Move Faster-upload by sdk";//上传之后文件名称
String fileName = "E:/6 - What If I Want to Move Faster.mp4";//本地文件路径和名称
UploadVideoRequest request = new UploadVideoRequest(accessKeyId, accessKeySecret, title, fileName);
/* 可指定分片上传时每个分片的大小，默认为2M字节 */
request.setPartSize(2 * 1024 * 1024L);
/* 可指定分片上传时的并发线程数，默认为1，(注：该配置会占用服务器CPU资源，需根据服务器情况指定）*/
request.setTaskNum(1);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadVideoResponse response = uploader.uploadVideo(request);
if (response.isSuccess()) {
System.out.print("VideoId=" + response.getVideoId() + "\n");
} else {
/* 如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因 */
System.out.print("VideoId=" + response.getVideoId() + "\n");
System.out.print("ErrorCode=" + response.getCode() + "\n");
System.out.print("ErrorMessage=" + response.getMessage() + "\n");
}
}
3 整合阿里云视频点播
01-视频点播微服务的创建
一、创建视频点播微服务
1、创建微服务模块
Artifact：service-vod
2、引入依赖
3、application.properties
# 服务端口
server.port=8003
# 服务名
spring.application.name=service-vod
# 环境设置：dev、test、prod
spring.profiles.active=dev
#阿里云 vod
#不同的服务器，地址不同
aliyun.vod.file.keyid=LTAI4GKJXUR4VuFMrtnzzWBG
aliyun.vod.file.keysecret=yiEPUWzpivYpYTG8o0tVW4UFqE2EQh
4、启动类
VodApplication.java
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)//在vod中，我们只是做视频的相关操作，并没有操作数据库
@ComponentScan(basePackages={"com.atguigu"})//包的扫描规则
public class VodApplication {
public static void main(String[] args) {
SpringApplication.run(VodApplication.class,args);
}
}
二、整合阿里云vod实现视频上传
1、创建常量类
ConstantPropertiesUtil.java
@Component
public class ConstantPropertiesUtil implements InitializingBean {
@Value("${aliyun.vod.file.keyid}")
private String keyId;
@Value("${aliyun.vod.file.keysecret}")
private String keySecret;
//定义公开静态常量
public static String ACCESS_KEY_ID;
public static String ACCESS_KEY_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
ACCESS_KEY_ID = keyId;
ACCESS_KEY_SECRET = keySecret;
}
}
2、创建controller、service
VodController.java
@Api(description="阿里云视频点播微服务")
@RestController
@RequestMapping("/eduvod/video")
@CrossOrigin
public class VodController {
@Autowired
private VodService vodService;
//上传视频到阿里云
@PostMapping("uploadAlyiVideo")
public R uploadAlyiVideo(MultipartFile file){ //MultipartFile对象获取上传的文件
//上传视频返回视频的id
String videoId = vodService.uploadVideoAly(file);
return R.ok().data("videoId",videoId);
}
}
VodService.java
package com.atguigu.vod.service;
import org.springframework.web.multipart.MultipartFile;
public interface VodService {
String uploadVideoAly(MultipartFile file);
}
VodServiceImpl.java
@Service
public class VodServiceImpl implements VodService {
@Override
public String uploadVideoAly(MultipartFile file) {
try {
//如01.MP4
String fileName = file.getOriginalFilename();
//01
String title = fileName.substring(0,fileName.lastIndexOf("."));
InputStream inputStream = file.getInputStream();
UploadStreamRequest request = new UploadStreamRequest(ConstantPropertiesUtil.ACCESS_KEY_ID, ConstantPropertiesUtil.ACCESS_KEY_SECRET, title, fileName, inputStream);
UploadVideoImpl uploader = new UploadVideoImpl();
UploadStreamResponse response = uploader.uploadStream(request);
String videoId = response.getVideoId(); //请求视频点播服务的请求ID
if (response.isSuccess()) {
videoId = response.getVideoId();
} else { //如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因
videoId = response.getVideoId();
}
return videoId;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
3、启动后端vod微服务
4、swagger测试
org.springframework.web.multipart.MaxUploadSizeExceededException: Maximum upload size exceeded; nested exception is java.lang.IllegalStateException: org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.
解决办法：在配置文件中添加如下配置
# 最大上传单个文件大小：默认1M
spring.servlet.multipart.max-file-size=1024MB
# 最大置总上传的数据大小 ：默认10M
spring.servlet.multipart.max-request-size=1024MB
测试：
02-前端整合视频上传
一、配置nginx反向代理
将接口地址加入nginx配置：
location ~ /eduvod/ {
proxy_pass http://localhost:8003;
}
配置nginx上传文件大小，否则上传时会有 413 (Request Entity Too Large) 异常：
打开nginx主配置文件nginx.conf，找到http{}，添加：
client_max_body_size 1024m;
重启nginx：
nginx.exe -s stop
二、前端实现
1、数据定义
fileList: [],//上传文件列表
BASE_API: process.env.BASE_API // 接口API地址
2、整合上传组件
<el-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+'/eduvod/video/uploadAlyiVideo'"
:limit="1"
class="upload-demo">
<el-button size="small" type="primary">上传视频</el-button>
<el-tooltip placement="right-end">
<div slot="content">最大支持1G，<br>
支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
<i class="el-icon-question"/>
</el-tooltip>
</el-upload>
</el-form-item>
3、方法定义
//在上传接口中，上传成功后返回视频id(videoId)
//上传成功之后得到视频id，最终把视频id加到数据库中
handleVodUploadSuccess(response, file, fileList){
//上传id名称赋值
this.video.videoSourceId = response.data.videoId
},
//上传之前：设置一个提示
handleUploadExceed(files, fileList){
this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},
测试：
将视频名称存储到数据库表：
定义：
videoOriginalName:'', //视频名称
//上传视频成功调用的方法，返回视频id因此需要response
handleVodUploadSuccess(response, file, fileList){
//上传id名称赋值
this.video.videoSourceId = response.data.videoId
//上传视频名称赋值
this.video.videoOriginalName = file.name
},
测试：
03-删除云端视频
文档：服务端SDK->Java SDK->媒资管理
一、后端
VodController.java
//根据视频id删除阿里云视频
@DeleteMapping("removeAlyVideo/{id}")
public R removeAlyVideo(@PathVariable String id){
try {
//初始化对象
DefaultAcsClient client = InitObjectV.initVodClient(ConstantPropertiesUtil.ACCESS_KEY_ID,ConstantPropertiesUtil.ACCESS_KEY_SECRET);
//创建删除视频request对象
DeleteVideoRequest request = new DeleteVideoRequest();
//向request设置视频id
request.setVideoIds(id);
//调用初始化对象的方法实现删除
client.getAcsResponse(request);
return R.ok();
} catch (ClientException e) {
e.printStackTrace();
throw new GuliException(20001,"删除视频失败");
}
}
二、前端
1、定义api
api/edu/video.js
//根据视频id删除阿里云视频
deleteAliyunvod(id){
return request({
url:`/eduvod/video/removeAlyVideo/${id}`,
method:'delete'
})
}
2、组件方法
views/edu/course/chapter.vue
handleVodRemove(file, fileList){
video.deleteAliyunvod(this.video.videoSourceId)
.then(response=>{
this.$message({
type: 'success',
message: "删除成功"
})
})
},
beforeVodRemove(file, fileList){
return this.$confirm(`确定移除 ${file.name}？`)
},
视频点击删除，但是数据库中还是把视频名称和id加入进来，这是因为在过程中先做了上传，上传之后视频名称和id赋值到video对象中了，我们做的删除只是删除了阿里云中的视频，但是video中的数据还存在。
解决：
handleVodRemove(file, fileList){
video.deleteAliyunvod(this.video.videoSourceId)
.then(response=>{
this.$message({
type: 'success',
message: "删除成功"
})
//把文件列表清空
this.fileList = []
//把video视频id和视频名称值清空
//上传视频id赋值
this.video.videoSourceId = ''
//上传视频名称赋值
this.video.videoOriginalName = ''
})
},
04-视频文件回显
//方法中需要小节id
openEditVideo(videoId){
//弹框
this.dialogVideoFormVisible = true
//调用接口
video.getVideo(videoId)
.then(response=>{
this.video = response.data.video
// this.fileList = [{'name':this.video.videoOriginalName}]
})
},
