/*** 上传学习视频信息*/@Log(title = "上传学习视频信息", businessType = BusinessType.INSERT)@PostMapping("/uploadVideo")public AjaxResult add(HttpServletRequest request) {return toAjax(videoInfoService.insertVideoInfo(request));}/*** 上传学习视频信息** @param request 学习视频信息* @return 结果*/@Overridepublic int insertVideoInfo(HttpServletRequest request) {// 获取视频文件MultipartFile videoFile = ((MultipartHttpServletRequest) request).getFile("file");VideoInfo sysVideoInfo = new VideoInfo();if ((videoFile != null) && (!videoFile.isEmpty())) {// 获取项目路径String projectPath = RuoYiConfig.getUploadPath();// 获得文件名String oriFileName = videoFile.getOriginalFilename();//不带点后缀String suffix = FilenameUtils.getExtension(oriFileName);// 获取文件大小long size = videoFile.getSize() / 1024;// 设置默认deviceNumberString deviceNumber = "learning";sysVideoInfo.setDeviceNumber(deviceNumber);// 获取文件夹路径String folderPath = projectPath + File.separator + "videoInfo/info" + File.separator + deviceNumber + File.separator;// 获取文件路径String filePath = folderPath + oriFileName;//判断文件夹是否存在File file1 = new File(folderPath);if (!file1.exists()) {file1.mkdirs();//创建目录}File dest = new File(filePath);if (dest.exists()) {//文件已存在return 2;}try {videoFile.transferTo(dest);sysVideoInfo.setFileMd5(Md5Util.getFileMD5(dest));} catch (IOException e) {e.printStackTrace();}// 设置IDsysVideoInfo.setId(GUIDCreater.getGUID());// 设置视频类型//sysVideoInfo.setVideoType(videoType);// 设置文件名sysVideoInfo.setFileName(oriFileName);// 设置存储路径sysVideoInfo.setFilePath(filePath);// 设置下载路径String downloadPath = "videoInfo/info/download/" + deviceNumber + "/" + oriFileName.substring(0, oriFileName.lastIndexOf(".")) + "/" + suffix;sysVideoInfo.setDownloadPath(downloadPath);// 设置文件大小sysVideoInfo.setFileSize(String.valueOf(size));} else {return 0;}return videoInfoMapper.insertVideoInfo(sysVideoInfo);}/*** 下载视频** @param fileName   文件名* @param fileSuffix 文件后缀* @param request* @param response* @throws IOException* @throws ServletException*/@GetMapping("/download/{device_number}/{file_name}/{file_suffix}")public void downloadProgramFile(@PathVariable("device_number") String deviceNumber, @PathVariable("file_name") String fileName, @PathVariable("file_suffix") String fileSuffix, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {fileName += "." + fileSuffix;String localPath = RuoYiConfig.getProfile();String fileRealPath = localPath + File.separator + "upload" + File.separator + "/videoInfo/info" + File.separator + deviceNumber + File.separator + fileName;//设置文件路径File file = new File(fileRealPath);if (!file.exists()) {response.sendError(404, "视频文件不存在，下载失败");return;}Path filePath = Paths.get(fileRealPath);String mimeType = Files.probeContentType(filePath);response.setContentType(mimeType);request.setAttribute(NonStaticResourceHttpRequestHandler.ATTR_FILE, filePath);nonStaticResourceHttpRequestHandler.handleRequest(request, response);}//新建一个文件
package com.ruoyi.image;
import org.springframework.core.io.FileSystemResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.resource.ResourceHttpRequestHandler;
import javax.servlet.http.HttpServletRequest;
import java.nio.file.Path;@Component
public class NonStaticResourceHttpRequestHandler extends ResourceHttpRequestHandler {public final static String ATTR_FILE = "NON-STATIC-FILE";@Overrideprotected Resource getResource(HttpServletRequest request) {final Path filePath = (Path) request.getAttribute(ATTR_FILE);return new FileSystemResource(filePath.toString());}}-------------------------------------------------------------------------------------------------------------
前端记录
<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="视频名称" prop="fileName"><el-inputv-model="queryParams.fileName"placeholder="请输入视频名称"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleImport">上传</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['videoInfo:info:remove']">删除</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><div ref="tableDom"><el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="视频文件名称" align="center" prop="fileName" /><el-table-column label="视频文件存储路径" align="center" prop="filePath" /><el-table-column label="视频文件大小" align="center" prop="fileSize" /><el-table-column label="视频文件上传时间" align="center" prop="uploadDate" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.uploadDate, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="下载路径" align="center" prop="downloadPath" /><el-table-column label="视频预览" align="center"><template slot-scope="scope"><el-buttontype="primary"size="small"@click="handlePlay(scope.row)">预览</el-button></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['videoInfo:info:remove']">删除</el-button></template></el-table-column></el-table></div><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><el-dialog title="视频预览" :visible.sync="open"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></el-dialog><uploadVideoDialog@handleSaveSuccess="getList"ref="uploadVideoDialogRef"></uploadVideoDialog></div>
</template><script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/videoInfo/info";
import uploadVideoDialog from "./uploadVideoDialog";
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'export default {components: { uploadVideoDialog},name: "Info",data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 学习视频信息表格数据infoList: [],// 弹出层标题title: "",// 是否显示弹出层open: false,// 查询参数queryParams: {pageNum: 1,pageSize: 10,fileName: null,},// 视频预览窗口open: false,// 表单参数form: {},// 播放参数playerOptions: {},removeParams: {filePaths: [],ids: [],},// 选中视频idvideoId: "",tableHeight: "",// 表单参数form: {},// 表单校验rules: {}};},created() {this.getList();},mounted() {var _this = this;this.resizeTable();window.onresize = function () {_this.resizeTable();};},//记得清空  如果在keepalive中 则使用activated  deactivateddestroyed() {window.onresize = null;},methods: {/** 查询学习视频信息列表 */getList() {this.loading = true;listInfo(this.queryParams).then(response => {this.infoList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},// 表单重置reset() {this.form = {id: null,videoType: null,fileName: null,filePath: null,fileSize: null,uploadDate: null,delFlag: null,fileMd5: null,deviceNumber: null,nickName: null,jobNumber: null,userId: null,downloadPath: null};this.resetForm("form");},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids = selection.map(item => item.id)this.single = selection.length!==1this.multiple = !selection.length},/** 预览按钮 */handlePlay(row) {console.log("row");console.log(row);const name = row.fileName.substring(0, row.fileName.lastIndexOf("."));const downloadPath = row.downloadPath;console.log(downloadPath);this.open = true;console.log(process.env.VUE_APP_BASE_API + "/" + downloadPath);this.playerOptions = {playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0], //播放速度autoplay: false, // 是否自动播放。muted: false, // 是否静音播放，默认情况下将会消除任何音频。loop: false, // 是否循环播放。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 是否流体从而按比例缩放以适应其容器。flash: { hls: { withCreadentials: false } }, //可以播放rtmp视频html5: { hls: { withCreadentials: false } }, //可以播放m3u8视频sources: [{type: "video/mp4", // 播放的类型，在这里项目中需要的是rtmp，也可以修改为：‘video/mp4’src:process.env.VUE_APP_BASE_API + "/" + downloadPath,//src:"http://127.0.0.1:8088/videoInfo/info/download/learning/测试视频/mp4/",//src :"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"},],width: "100%",notSupportedMessage: "此视频暂无法播放...", // 当无法播放时允许覆盖Video.js，显示的默认信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true,},};},// 打开上传文件弹出框handleImport() {this.$refs.uploadVideoDialogRef.open();},//table自动高度returnTableHeight(ref, bottomOffset) {let height = null;height =window.innerHeight - ref.getBoundingClientRect().top - bottomOffset;return height;},resizeTable() {this.$nextTick(() => {this.tableHeight = this.returnTableHeight(this.$refs.tableDom, 100);}, 0);},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {updateInfo(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addInfo(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const ids = row.id || this.ids;this.$modal.confirm('是否确认删除学习视频信息编号为"' + ids + '"的数据项？').then(function() {return delInfo(ids);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},}
};
</script>上传文件的弹窗
<template><div class="app-container"><el-dialog:title="setLightTitle":visible.sync="visible":close-on-click-modal="false"width="25%"><el-formref="appForm"style="margin-bottom: -30px":model="appData":rules="rules"size="small"label-width="100px"><div style="margin: 0 auto; text-align: center"><el-uploadaction="#"ref="upload":show-file-list="true":auto-upload="false":multiple="false":on-change="uploadFile":limit="1"dragaccept=".mp4"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip text-center" slot="tip"><span>仅允许mp4文件。</span></div></el-upload></div></el-form><span slot="footer" class="dialog-footer"><el-button @click="visible = false" type="primary" size="small">取 消</el-button><el-buttontype="primary"size="small"@click="handleUpload":loading="loading">确 定</el-button></span></el-dialog></div>
</template><script>
import { addInfo } from "@/api/videoInfo/info";export default {name: "upload-file-dialog",data() {return {file: null,formData: null,updateVersion: null, //上传版本updateSupport: null, //是否全部更新appData: {handwareid: null,updateVersion: null,updateSupport: null,},loading: false,visible: false,setLightTitle: "上传视频",acceptFile: ".mp4",rules: {updateVersion: [{ required: true, message: "请xx", trigger: "blur" },],},};},methods: {dialogClose() {this.visible = false;},open() {this.file = null;this.formData = null;this.visible = true;this.updateVersion = null;this.updateSupport = false;this.$refs.upload?.clearFiles();},uploadFile(item) {this.file = item.raw; // 通过DOM取文件数据this.formData = new FormData(); //new一个formData事件this.formData.append("file", this.file); //将file属性添加到formData里},handleUpload() {if (this.file == null) {this.$message("请先选择文件!");return;}let vm = this;this.$refs.appForm.validate((valid) => {if (valid) {vm.loading = true;addInfo(vm.formData).then((response) => {vm.loading = false;this.$refs.upload.clearFiles();if (response.code === 200) {vm.visible = false; //关闭窗口vm.$emit("handleSaveSuccess"); //成功通知父窗口vm.$message("上传成功!");}}).catch(function (error) {vm.loading = false;setTimeout(() => {vm.$message("上传失败!" + error);}, 150);});}});},},
};
</script><style scoped>
/deep/ .el-upload {width: 70%;height: 100%;
}
/deep/ .el-upload .el-upload-dragger {width: 100%;height: 100%;
}
</style>