SSM实现图片上传功能
效果
在前端页面点击上传图片功能按钮,即弹出文件管理器,选择图片并上传;
思路
在前端页面添加 input 标签,type选择file。在后端controller编写方法。方法体: 定义一个文件保存的相对路径,本地运行的项目就定义本地路径,服务器项目就定义服务器路径。定义文件名。生成uuid作为文件名称、获得文件类型、文件名后缀、最后得到文件名、生成文件保存路径。把图片的相对路径写入数据库中。前端代码
<form class="layui-form " action="${pageContext.request.contextPath}/home/add" enctype="multipart/form-data" method="post" onsubmit="return sumbit_sure()" ><div class="layui-form-item"><label class="layui-form-label">图片</label><div class="layui-input-inline"><input type="file" name="file" ></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" type="submit">立即提交</button></div></div></form>
注意 !enctype="multipart/form-data" method="post" οnsubmit="return sumbit_sure()" 必须填写
后端代码
@RequestMapping("/add")public String add(Home home, Model model) throws IOException{String sqlPath = null;//定义文件保存的本地路径String localPath="E:\酒店后台管理系统\程序\upload";//定义 文件名String filename=null;if(!home.getFile().isEmpty()){//生成uuid作为文件名称String uuid = UUID.randomUUID().toString().replaceAll("-","");//获得文件类型(可以判断如果不是图片,禁止上传)String contentType=home.getFile().getContentType();//获得文件后缀名String suffixName=contentType.substring(contentType.indexOf("/")+1);//得到 文件名filename=uuid+"."+suffixName;System.out.println(filename);//文件保存路径home.getFile().transferTo(new File(localPath+filename));}//把图片的相对路径保存至数据库sqlPath = "/upload/"+filename;System.out.println(sqlPath);home.setImg(sqlPath);homeService.addHome(home);model.addAttribute("home",home);return "home_show";}