使用SSM框架实现图片的上传

SSM实现图片上传功能

效果

在前端页面点击上传图片功能按钮，即弹出文件管理器，选择图片并上传；

思路

1. 在前端页面添加 input 标签，type选择file。
2. 在后端controller编写方法。
3. 方法体：
   • 定义一个文件保存的相对路径，本地运行的项目就定义本地路径，服务器项目就定义服务器路径。
   • 定义文件名。
   • 生成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";
    }

---