类似抖音的短视频管理系统+Java后端+vue前端(8)

视频相关信息的上传

前端

mydata.js

    //视频相关信息上传
    $("#submit").on("click",function () {
        //alert("11111");
        //获取表单信息
        //$("#form")[0]  获取js表单原生对象 document.getElementById("form")
        var formData = new FormData($("#form")[0])
        //获取videopath
        var videoPath = new formData.get("videoPath")
        var videoDesc = new formData.get("videoDesc")

        $.ajax({
            url:"/videos/add",
            type:"post",
            data:formData,  //往后台传输表单信息
            dataType: "json",
            contentType:false,  //防止jQuery进行操作  表单提交
            processData:false,  //让数据进行序列化
            async:false,    //关闭传输
            cache:false,    //关闭缓存
            //回调函数,得到回台返回的值
            success:function (res){
                console.log(res)
            }
        })
    })


注意:
#submit是提交按钮的id属性
#form是form表单的id属性
videoPath、videoDesc是表单input标签的name属性

视频上传完成后弹出窗口提示并刷新

后端

业务层Service

    int insert(Video row);

serviceImpl

    @Override
    public int insert(Video row) {
        return videoMapper.insert(row);
    }

控制层Controller

    @RequestMapping("/add")
    @ResponseBody
    public Result add(Video video){
        Result result = new Result();
        System.out.println("输出视频相关信息");
        System.out.println(video);
        try {
            //通过uuid创建32为不重复随机码
            String id = UUID.randomUUID().toString();
            Date date = new Date();
            //给video添加id还有当前日期
            video.setId(id);
            video.setCreateTime(date);
            //设置播放路径
            video.setVideoPath("video/"+video.getVideoPath());
            //设置视频的封面图
            video.setCoverPath("img/userface1.jpg");
            //调用业务层添加视频信息
            videoService.insert(video);
            result.setMessage("ok");
            result.setStatus(1);
        }catch (Exception e){
            e.printStackTrace();
            result.setMessage("error");
        }
        return result;
    }

添加功能,将文件名变为随机名

添加到controller类视频上传方法

    //生成一个随机名
    //截取文件后缀名
    String name = "" + new Date().getTime() +"."+ filename.split("\\.")[1];
    System.out.println("");
    List list = new ArrayList();
    list.add(name);
    result.setList(list);

更改UpUtil工具类,添加一个name

将随机名显示到前端

测试