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

ruoyi框架 专栏收录该内容
1 篇文章 1 订阅

若依框架(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
  • 2
    点赞
  • 4
    评论
  • 21
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <br /> </p> <p style="color:#24292E;"> 课程的实战源码是我在 GitHub 上开源项目 <a href="https://github.com/ZHENFENG13/spring-boot-projects">spring-boot-projects</a> 中的其中一个项目代码,目前已有 2300 多个 star,项目截图如下: </p> <p style="color:#24292E;"> <img src="https://img-bss.csdn.net/201908031439119810.png" alt="" /> </p> <p style="color:#24292E;"> <br /> </p> <p style="color:#24292E;"> 由于项目比较受大家欢迎,因此心中就出现了将它做成教学视频的想法,也就是你现在了解的这个课程《SpringBoot入门及前后端分离项目开发》,本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备相关概念介绍,第三个部分是 Spring Boot 项目实践开发。Spring Boot 介绍、前后端分离、API 规范等内容<strong>旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力;</strong>这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后端分离的 Spring Boot 实践项目,让大家实际操作并从无到有开发一个线上项目,并学习到一定的开发经验以及其中的开发技巧,<span>旨在让读者具有将 Spring Boot 真正应用于项目开发的能力;</span> </p> <p style="color:#24292E;"> 以下为实践项目的页面功能展示,分别为: </p> <ul style="color:#24292E;"> <li> 登录页面 </li> </ul> <p> <span style="background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/201908031438579072.png" alt="" /><br /> </span> </p> <p style="color:#24292E;"> <br /> </p> <ul style="color:#24292E;"> <li> 列表页面(分页功能) </li> </ul> <p> <span style="background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/201908031438403196.png" alt="" /><br /> </span> </p> <p style="color:#24292E;"> <br /> </p> <ul style="color:#24292E;"> <li> 图片上传功能 </li> </ul> <p> <span style="background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/201908031438176997.png" alt="" /><br /> </span> </p> <p style="color:#24292E;"> <br /> </p> <ul style="color:#24292E;"> <li> 富文本编辑器整合使用 </li> </ul> <p style="color:#24292E;"> <br /> </p> <p style="color:#24292E;"> <img src="https://img-bss.csdn.net/201908031437475366.png" alt="" /> </p> <p style="color:#24292E;"> 实践项目的主要功能页面就是这些,通过项目展示大家也能够感受到,在实际应用开发中的高频次功能都已经实现,稍加修改就可以运用到企业开发中,整个项目的开发模式为前后端分离的模式,即 Spring Boot 提供后端接口,前端页面通过 Ajax 异步调用接口的方式与后端服务器进行交互并将数据填充至页面中,这也是目前企业开发中比较重用的开发模式,希望大家能够了解并且能够实际的上手开发。 </p> <p> <br /> </p>
©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值