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

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

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

MimeTypeUtils工具类

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

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 "";
        }
    }

上传页面

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

  1. 引入组件
    注意位置不要放错。
<th:block th:include="include :: jasny-bootstrap-css"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
  1. html代码
<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>
  1. js代码
/*上传开始*/
    $('#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);
            }
        });
    }
    /*上传结束*/

修改页面

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

<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>

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

展示页面

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

{
    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>';
     }
},

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

  1. 加入单元格点击事件
 $(function () {
      var options = {
          url: prefix + "/list",
          createUrl: prefix + "/add",
          updateUrl: prefix + "/edit/{id}",
          removeUrl: prefix + "/remove",
          exportUrl: prefix + "/export",
          //单元格点击事件
          onClickCell: onClickCell,
  1. 实现单元格点击弹出播放
 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>'
                });
            }
        }

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

补充

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

# 文件上传
  servlet:
     multipart:
       # 单个文件大小
       max-file-size:  50MB
       # 设置总上传的文件大小
       max-request-size:  100MB
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页