springboot 图片文件的上传并显示于页面

springboot中图片文件的上传并显示在页面上

学生页面

在数据库中用picUrl来放图片

<div class="table-responsive ">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>照片</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="stu:${stu}">
                        <td th:text="${stuStat.index+1}"></td>
                        <td th:text="${stu.cno} "></td>
                        <td th:text="${stu.name}"></td>
                        <td th:text="${stu.age}"></td>
                        <td><img th:src="@{${stu.picUrl}}" style="width: 250px; height: 125px"></td>
                        <td><a th:href="@{/update(cno=${stu.cno}) }" class="btn bg-success">更新</a>&nbsp;&nbsp;&nbsp;<a th:href="@{/delete(cno=${stu.cno})}" class="btn btn-danger">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>

更新页面

这里我们只需要做图片的更新就行

<form class="form-horizontal" style="margin-top: 40px" th:action="@{/update}" th:method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="cno" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="cno" name="cno" th:value="${stu.cno}" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name" th:value="${stu.name}" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="age" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="age" name="age" th:value="${stu.age}" placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="picture" class="col-sm-2 control-label">照片</label>
                    <div class="col-sm-10">
                        <input type="file" class="form-control" id="picture" name="picture" placeholder="">
                        <img th:src="@{${stu.picUrl}}" alt="">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default bg-info">修改学生</button>
                    </div>
                </div>
            </form>

控制器

 @PostMapping("/update")
    public String receiveStudent(Student student, @RequestParam("picture") MultipartFile img){
        if (!img.isEmpty()) {
            String filename = img.getOriginalFilename();
            try {
                String newFilename= UUID.randomUUID()+"_"+filename;
                img.transferTo(new File("D:\\大二上\\SpringBoot\\springboot01_10\\src\\main\\resources\\static\\upload\\" + newFilename));
                student.setPicUrl("/upload/"+newFilename);
            }catch (IOException e){
                e.printStackTrace();
            }
        }
        int flag = stuService.updateStu(student);
        return "redirect:/student";
    }

效果显示