RYF's Blog

远离是非圈子 回归平静生活

首页 归档 标签 关于

类似抖音的短视频管理系统+Java后端+vue前端（7）

2023-02-23 6 min read # 实习项目

实现视频上传功能

前端

开启工具栏

编写头工具栏事件

//头工具栏事件
table.on('toolbar(videoTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
        case 'add':
            layer.msg('添加');
            break;
        case 'delete':
            layer.msg('删除');
            break;
        case 'daoru':
            layer.msg('编辑');
            break;
    };
});


注意：

  1. toolbar(videoTable)中的videoTable指的是DataTable.html页面中的<table>标签的lay-filter属性
  2. 下方的三个值指的是DataTable.html页面中的按钮事件<a>标签的lay-event属性

实现点击添加按钮跳出视频添加页面

case 'add':
    layer.msg('添加');
    //打开一个新的窗口，添加视频操作
    var  layer = layui.layer;
    layer.open({
        type:2, //iframe可以直接引入一个页面
        title:"添加视频",
        shade:0.5,  //窗口的外部阴影配置
        shareClose:true,    //点击外部窗口消失
        area:["60%","60%"],
        content:"/templates/addvideo.html"
    })
break;

上传文件工具类

视频文件的上传mydata.js

//视频上传
upload.render({
    elem: '#choosevideo' //绑定选择文件的按钮
    ,url: '/videos/upload/' // 上传视频的路径
    ,auto: false //选择文件后不自动上传
    ,accept:'file'
    ,size:500000
    ,bindAction: '#sure' //指向一个按钮触发上传
    ,choose: function(obj){
        //将每次选择的文件追加到文件队列
        var files = obj.pushFile();
        //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
        obj.preview(function(index, file, result){
            console.log(index); //得到文件的名称
            var  filename =file.name;
            //把文件名称写入到输入框里
            $("#video_url").val(filename)
        });
    }
});

视频上传完成弹出窗口

//上传完毕弹出一个小窗口
,done: function(res, index, upload){
    if (res.message == "ok"){
        layer.msg("上传完毕 ")
    }
},
error:function (res) {
    layer.msg(res.message)
    //关闭弹窗
    layer.closeAll()
}

上传页面addvideo.html

<body>
<form class="layui-form" action="" lay-filter="example" id="form">
    <div class="layui-form-item">
        <label class="layui-form-label">视频</label>
        <div class="layui-input-block">
            <input type="text" id="video_url" name="videoPath" class="layui-input layui-disabled"
                placeholder="视频名称（只支持mp4)"/>
            <!--//上传按钮-->
            <button type="button" class="layui-btn" id="choosevideo">选择视频</button>
            <button type="button" class="layui-btn" id="sure">确定</button>
            </br>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">视频描述</label>
        <div class="layui-input-block">
            <input type="text" name="videoDesc" autocomplete="off" placeholder="请输入视频描述" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sub" id="submit">立即上传</button>
        </div>
    </div>
</form>
<script src="../layui/layui.js"></script>
<script src="../js/mydata.js"></script>
</body>

后端

videocontroller

//视频上传
@RequestMapping("upload")
@ResponseBody
public Result upload(MultipartFile file, HttpServletRequest request){
Result result = new Result();
//输出到后台的文件名
String filename = file.getOriginalFilename();
System.out.println(filename);
try {
UpUtils.upfile(file,request);
result.setMessage("ok");
}catch (Exception e){
e.printStackTrace();
result.setMessage("error");
}
return result;
}

UpUtils工具类

public class UpUtils {
    //静态的方法，通过类名直接调用方法
    public static void upfile(MultipartFile file, HttpServletRequest request) {
        //获取当前的路径----war包下的WEB-INF/video/路径
        String realPath = request.getServletContext().getRealPath("/WEB-INF/video/");
        System.out.println("realpath：" + realPath);
        // 开发代码的web-INF/video的路径:
        String basePath = "D:\\JetBrains\\project\\tiktok-project\\src\\main\\webapp\\WEB-INF\\video";
        // 将参数里的 file写入到两个文件当中
        //写入到war包的路径
        File file1 = new File(realPath);
        //写入到开发代码的文件路径当中
        File file2 = new File(basePath);
        //判断两个文件夹是否存在
        if (!file1.exists()) {
            file1.mkdirs();
        }
        if (!file2.exists()) {
            file2.mkdirs();
        }
        //获取当前的文件名
        String orgName = file.getOriginalFilename();
        try {
            //用输出流开始拷贝文件
            // 参数1 拷贝文件的路径+文件名,参数2是否在文件的末尾追加内容
            FileOutputStream fos1 = new FileOutputStream(realPath + orgName, false);
            FileOutputStream fos2 = new FileOutputStream(basePath + orgName, false);
            // file类型是 MultipartFile类型，可以转化为字节数组
            fos1.write(file.getBytes());
            fos2.write(file.getBytes());
        /*   long  bs=new Date().getTime();
            UUID.randomUUID().toString();*/
            // 刷新缓存，把缓存内容，刷到文件当中
            fos1.flush();
            fos2.flush();
            if (fos1 != null) {
                fos1.close();
            }
            if (fos2 != null) {
                fos2.close();
            }
        } catch (Exception e) {
        }
    }
}


**注意：**这两个路径要改成自己的

Powered by Gridea RSS