若依视频预览

若依框架（ruoyi）实现视频上传和表格视频预览

最近功能业务需求，需要实现视频上传和表格视频预览，没有找到特别合适的，自己摸索了下，现在整理出来给大家

MimeTypeUtils工具类

若依框架媒体工具类MimeTypeUtils默认允许上传的后缀是不包含视频格式文件的，我们需要手动添加，保证视频的上传成功和后台路径的获取。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public static final String MEDIA_MP4 = "video/mp4"; public static final String[] MEDIA_EXTENSION = {"swf", "flv", "mp3", "wav", "wma", "wmv", "mid", "avi", "mpg", "asf", "rm", "rmvb", "mp4"}; // 默认允许的后缀名，最后添加MP4格式或其他视频格式 public static final String[] DEFAULT_ALLOWED_EXTENSION = { // 图片 "bmp", "gif", "jpg", "jpeg", "png", // word excel powerpoint "doc", "docx", "xls", "xlsx", "ppt", "pptx", "html", "htm", "txt", // 压缩文件 "rar", "zip", "gz", "bz2", // pdf "pdf", "mp4" }; public static String getExtension(String prefix) { switch (prefix) { case IMAGE_PNG: return "png"; case IMAGE_JPG: return "jpg"; case IMAGE_JPEG: return "jpeg"; case IMAGE_BMP: return "bmp"; case IMAGE_GIF: return "gif"; case MEDIA_MP4: return "mp4"; default: return ""; } } Copy

上传页面

若依框架里面有两个可以实现文件上传的插件，一个是jasny-bootstrap，一个是bootstrap-fileinput，我这里使用的jasny-bootstrap。
先贴下add.html的部分代码

1. 引入组件
   注意位置不要放错。

   1 2	<th:block th:include="include :: jasny-bootstrap-css"/> <th:block th:include="include :: jasny-bootstrap-js"/> Copy

2. html代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <div class="form-group"> <label class="col-sm-3 control-label">视频：</label> <div class="col-sm-8"> <!-- input用来存储上传路径到数据库 --> <input id="technician_video" name="technicianVideo" class="form-control" type="text" style="display: none"> <div class="fileinput fileinput-new input-group" data-provides="fileinput" id="inputTechnicianVideo"> <!-- 此div用来回显预览上传完成后的视频 --> <div class="fileinput-preview fileinput-exists thumbnail" id="viderSource"> </div> <!--相关按钮等 --> <div> <span class="btn btn-white btn-file"> <span class="fileinput-new">选择文件</span> <span class="fileinput-exists">更改</span> <input type="file" id="technicianVideo"> </span> <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a> </div> </div> </div> </div> Copy

3. js代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

   /*上传开始*/ $('#inputTechnicianVideo').on('change.bs.fileinput ', function (e) { let imgFile = $('#technicianVideo')[0].files[0]; let video = "video"; uploadFile(imgFile, video); }); //ruoyi通用的上传接口，不需要自己写后台，框架自带 function uploadFile(imgFile, imgId) { var formData = new FormData(); if (imgFile == null) { $.modal.alertWarning("请先选择文件路径"); return false; } formData.append('file', imgFile); $.ajax({ url: "/common/upload", type: 'post', cache: false, data: formData, processData: false, contentType: false, dataType: "json", async: false, success: function (result) { //给input赋值 $('#technician_video').val(result.fileName); //用来回显预览视频 let videoElement = '<video controls="controls" width="100%"><source type="video/mp4" src="' + result.fileName + '"/></video>\n'; $("#viderSource").append(videoElement); } }); } /*上传结束*/ Copy

修改页面

同理需要引入css和js文件
下面帖edit.html主要代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div class="form-group"> <label class="col-sm-3 control-label">技师视频：</label> <div class="col-sm-8"> <input id="technician_video" name="technicianVideo" th:field="*{technicianVideo}" class="form-control" type="text" style="display:none "> <div class="fileinput fileinput-new" data-provides="fileinput" id="inputTechnicianVideo"> <!-- 此div用来预览需要修改的视频 --> <div class="fileinput-new thumbnail" data-trigger="fileinput"> <video controls="controls" width="100%"> <source type="video/mp4" th:src="*{technicianVideo}"/> </video> </div> <!-- 此div用来回显预览上传完成后的视频 --> <div class="fileinput-preview fileinput-exists thumbnail" id="viderSource"> </div> <div> <span class="btn btn-white btn-file"> <span class="fileinput-new">选择文件</span> <span class="fileinput-exists">更改</span> <input type="file" id="technicianVideo"> </span> <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a> </div> </div> </div> </div> Copy

js代码和新增页面是一样的，不需要变动，拿来使用即可。

展示页面

新增上传和修改上传完成，现在可以实现表格预览功能了

1 2 3 4 5 6 7 8

{ field: 'technicianVideo', title: '视频', align: 'center', formatter: function (value, row, index) { return '<video controls="controls" height="150px" width="150px"> <source type="video/mp4" src="' + value + '"/></video>'; } }, Copy

到这一步已经可以实现表格内预览视频了，但是会比较小，所以加了个点击弹出播放的功能。

1. 加入单元格点击事件

   1 2 3 4 5 6 7 8 9

   $(function () { var options = { url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", //单元格点击事件 onClickCell: onClickCell, Copy

2. 实现单元格点击弹出播放

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   function onClickCell(field, value, row, $element){ //因为只需要视频单元格弹出，所以加一个字段判定 if(field == 'technicianVideo'){ layer.open({ type: 1, title: '视频预览', closeBtn: 0, offset: ['100px'], skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: '<video controls="controls"> <source type="video/mp4" src="' + value + '"/></video>' }); } } Copy

   UP这里没有去判断视频的后缀名，严谨一点需要加上后缀名的判断，以保证上传类型正确。
   至此就完成了视频的上传，修改，预览。有不懂的欢迎留言，有写的不对的地方也请大家多提意见。

补充

修改上传文件大小限制application.yml

1 2 3 4 5 6 7

# 文件上传 servlet: multipart: # 单个文件大小 max-file-size: 50MB # 设置总上传的文件大小 max-request-size: 100MB