类似抖音的短视频管理系统+Java后端+vue前端(8)
![](https://gblog.luciferryf.eu.org/post-images/dy-project-8.jpg)
视频相关信息的上传
前端
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);
![](https://gblog.luciferryf.eu.org/post-images/1677206026628.png)
更改UpUtil工具类,添加一个name
![](https://gblog.luciferryf.eu.org/post-images/1677206095672.png)
将随机名显示到前端
![](https://gblog.luciferryf.eu.org/post-images/1677209000244.png)
测试