目录

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、引入视频点播所需依赖

    com.aliyunaliyun-java-sdk-core4.6.0com.aliyunaliyun-java-sdk-vod2.16.11com.alibabafastjson1.2.83com.aliyunaliyun-java-sdk-kms2.10.1com.aliyunaliyun-java-sdk-core4.5.1com.aliyun.ossaliyun-sdk-oss3.10.2com.aliyunaliyun-java-sdk-vod2.16.11com.alibabafastjson1.2.83org.jsonjson20170516com.google.code.gsongson2.8.2com.aliyunaliyun-sdk-vod-upload1.4.15com.baomidoumybatis-plus-boot-starter

1.2、application.properties

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

1.3、启动类

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

2、实现视频上传

2.1、后端

2.1.1、创建常量类

@Component
public class ConstantVodUtils implements InitializingBean {public static String ACCESS_KEY_ID;public static String ACCESS_KEY_SECRET;@Value("${aliyun.vod.file.keyid}")private String accessKeyId;@Value("${aliyun.vod.file.keysecret}")private String accessKeySecret;@Overridepublic void afterPropertiesSet() throws Exception {ACCESS_KEY_ID = accessKeyId;ACCESS_KEY_SECRET = accessKeySecret;}
}

2.1.2、上传视频到阿里云

VodService

public interface VodService {/*** 上传视频到阿里云* @param file 视频文件* @return 上传后的视频ID*/String uploadVideo(MultipartFile file);}

VodServiceImpl

@Service
public class VodServiceImpl implements VodService {/*** 上传视频到阿里云* @param file 视频文件* @return 上传后的视频ID*/@Overridepublic String uploadVideo(MultipartFile file) {try {String accessKeyId = ConstantVodUtils.ACCESS_KEY_ID;String accessKeySecret = ConstantVodUtils.ACCESS_KEY_SECRET;String fileName = file.getName();   // 上传文件输入流String title = fileName.substring(0, fileName.lastIndexOf("."));;  // 阿里云的文件名InputStream inputStream = file.getInputStream();UploadStreamRequest request = new UploadStreamRequest(accessKeyId, accessKeySecret, title, fileName, inputStream);UploadVideoImpl uploader = new UploadVideoImpl();UploadStreamResponse response = uploader.uploadStream(request);String videoId = null;if (response.isSuccess()) {videoId = response.getVideoId();} else {//如果设置回调URL无效，不影响视频上传，可以返回VideoId同时会返回错误码。其他情况上传失败时，VideoId为空，此时需要根据返回错误码分析具体错误原因videoId = response.getVideoId();}return videoId;} catch (Exception e) {e.printStackTrace();return null;}}}

VodController

@RestController
@CrossOrigin
@RequestMapping("/vod/video")
@Api(description="阿里云视频点播微服务")
public class VodController {@Autowiredprivate VodService vodService;/*** 上传视频到阿里云* @param file 视频文件* @return*/@ApiOperation("上传视频到阿里云")@PostMapping("/uploadAliyunVideo")public R uploadAliyunVideo(MultipartFile file) {String videoId = vodService.uploadVideo(file);return R.ok().data("videoId", videoId);}}

2.2、配置 nginx

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

		location ~ /vod/ {           proxy_pass http://localhost:8003;}

在 server{} 的 server_name 下配置

client_max_body_size 1024m;

2.3、前端

2.3.1、上传视频组件

src\views\edu\course\chapter.vue

                上传视频
最大支持1G，
支持3GP、ASF、AVI、DAT、DV、FLV、F4V、
GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、
MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、
SWF、TS、VOB、WMV、WEBM 等视频格式上传

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

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

public class InitVodClient {/*** 初始化阿里云视频点播客户端* @param accessKeyId* @param accessKeySecret* @return* @throws ClientException*/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;}}

    /*** 根据视频ID删除阿里云中的视频* @param videoId* @return*/@DeleteMapping("/{videoId}")public R deleteAliyunVideo(@ApiParam(name = "videoId", value = "视频ID", required = true) @PathVariable String videoId) {try {// 初始化客户端DefaultAcsClient client = InitVodClient.initVodClient(ConstantVodUtils.ACCESS_KEY_ID, ConstantVodUtils.ACCESS_KEY_SECRET);// 创建删除视频 request 对象DeleteVideoRequest request = new DeleteVideoRequest();// 像 request 对象设置视频IDrequest.setVideoIds(videoId);// 调用初始化对象方法实现删除client.getAcsResponse(request);return R.ok();} catch (Exception e) {e.printStackTrace();throw new GuliException(20001, "删除视频失败");}}

    /*** 根据视频ID删除阿里云中的视频* @param {*} videoId * @returns */deleteAliyunVod(videoId) {return request({url: `/vod/video/${videoId}`,method: 'DELETE',})}

            /*** 上传视频时删除列表中的视频*/beforeVodRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},/*** 根据视频ID删除阿里云中的视频*/handleVodRemove() {video.deleteAliyunVod(this.video.videoSourceId)// 删除成功.then(response => {// 提示信息this.$message({type: 'success',message: '删除视频成功!'});// 清空文件列表this.fileList = [];// 初始化小节中的视频ID和名称this.video.videoSourceId = '';this.video.videoOriginalName = '';})// 删除失败.catch(() => {this.$message({type: 'info',message: '已取消删除'});});}