Springboot结合前端上传图片保存到数据库读取 |
您所在的位置：网站首页 › js上传视频数据怎么保存 › Springboot结合前端上传图片保存到数据库读取 |
Springboot结合前端上传图片保存到数据库读取
|
前言
最近在做一个前后端分离系统，也是闲的无聊做个好玩的练练手。就突然想着之前想了一天的问题，前端怎么去发送图片到后端保存（不是专业前端，轻点喷），图片到底是保存在本地还是存在oss上，保存图片的方式又是什么，这些问题想到我头皮发麻。最后，还是花了一下午的时间写出来了个半成品（最后一步没保存到数据库，后期更新）。 首先我们先来看看效果图： 前端包装一个FormData参数，发送给后端接收，后端定义好实体类和文件，数据交互使用ajax，页面跳转使用Ajax，数据传递使用session。网页展示中，使用FileReader来实时预览。 可能有人问，为什么不用base64编码去保存图片信息，不为什么，因为我不喜欢。。（其实是太长了，每次测试都眼花） 实体类由于这里是测试，所以我就定义了三个，用户名-username、密码-password、文件名-imgName @Data @AllArgsConstructor @NoArgsConstructor @TableName("user") // 忽略这里，还没连接数据库。。。 public class Info { private Integer id; private String username; private String password; private String imgName; } 前端登录层 Title 用户名： 密码： 头像： function xmTanUploadImg(obj) { var file = obj.files[0]; console.log("obj:" + obj); console.log("file:" + file); console.log("fileName:" + file.name) console.log("file.size = " + file.size); var reader = new FileReader(); reader.onload = function (e) { console.log(e)// ProgressEvent 对象，里面的target.result就是base64编码 console.log("成功读取...."); var img = document.getElementById("avarimgs"); img.src = e.target.result; //或者 img.src = this.result; //e.target == this } reader.readAsDataURL(file) } function reg() { let form = new FormData($("#form-data")[0]) console.log(form) $.ajax({ //接口地址 url: 'submit', type: 'POST', data: form, async: false, cache: false, contentType: false, processData: false, success:function (data) { console.log(data) console.log(data.imgName); sessionStorage.setItem("img_name",data.imgName); window.location='/info' } }); } 后端控制层 @Controller @ResponseBody public class FileController { @RequestMapping(value = "/submit", method = RequestMethod.POST) public Info submit(MultipartFile file,Info info) throws Exception { //这里就可以获取里面的上传过来的数据了 //做一些存库操作，以及返回的数据 String filename = file.getOriginalFilename(); System.out.println(filename); String filePath = System.getProperty("user.dir")+"\\src\\main\\resources\\static\\img"; if (!new File(filePath).exists()){ new File(filePath).mkdirs(); } File dest = new File(filePath + File.separator + info.getUsername()+"_"+filename); try { file.transferTo(dest); }catch (Exception e){ e.printStackTrace(); } System.out.println(info); info.setImgName(info.getUsername()+"_"+filename); return info; } }我在后端由于要保存用户头像，所以命名为了防止冲突，直接暴力的使用用户名加上图片文件名进行保存，这样可以很大程度上保证用户的头像唯一（或者在登录的时候直接加一个判断，先保证用户名在数据库中唯一，因为我自己在设计的时候用的主要是一个别名而不是用户名，所以我就没有加） 保存目录不能直接写死路径，假如你的项目需要部署在服务器上，那么就会直接报找不到文件的错误。所以我借用了MyBatis-plus的写法，用了当前系统目录； 踩的坑 在测试的时候，由于第一次上传上去之后图片不能立即显示，需要重启服务器。这个坑折磨了我半个小时，最后看了一眼网上大佬们的做法，加一个资源映射就完美的解决了。确实，这个很nice。所以我也给大家: @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { System.out.println("图片配置生效"); String filePath = System.getProperty("user.dir")+"\\src\\main\\resources\\static\\img\\"; System.out.println(filePath); registry.addResourceHandler("/img/**").addResourceLocations("file:"+filePath); } }依赖问题 很简答，我没用什么很花里胡哨的操作。如果你是直接复制这个demo的话，只需要加一个thymeleaf就行，配置文件不用谢任何东西。 这个也是缠了我好几天的问题了，我i也终于解决了，啊，爽 谢谢你这么忙还来看我的文章，靓仔！ |
虽说界面有点丑，但是也还将就吧。 接下来就直接把代码贡献给各位（后期改进点击图片上传）
最后给一张结构图，仅供参考： 
如果对你有帮助，请尽情留下你的评论和点赞，我不会嫌弃的哦。 如果哪儿有值得改进的地方，也请告诉我，我会马上加以改进；【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |