使用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" onsubmit="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";

    }

---