SpringBoot+layui上传图片(图片流)的方式传到数据库

本文介绍了一种使用SpringBoot结合layui前端框架,实现异步上传多组图片并将其以图片流的形式存储到数据库的方法。通过HTML和JS处理前端选择图片,Controller接收并处理请求,Service层完成图片的存储操作。
摘要由CSDN通过智能技术生成

这中方式是能够选择多组图片进行上传,并且是异步的形式,虽然选择的多个图片,但是却是一个图片一个图片存的,所以后台方法中写的是存一个图片的方法

HTML

 <div class="form-group" th:if="${uemiReport ==null || uemiReport.photo==null}">
            <input type="hidden" name="photo" class="multiple_show_img" value="">
            <div class="layui-upload">
                <div class="col-md-2 col-sm-2 col-xs-2" style="text-align: right;">
                    <button type="button" class="layui-btn" id="multiple_img_upload">报告上传</button>
                </div>
                <div class="col-md-10 col-sm-10 col-xs-10">
                    <blockquote class="layui-elem-quote layui-quote-nm">
                        <div class="layui-upload-list" id="div-slid
首先,你需要在你的Spring Boot项目中添加MyBatis和MyBatis-Spring依赖。然后,在你的项目中创建一个Mapper接口,用来定义数据库操作的方法。接着,你需要在MyBatis的配置文件中配置数据源和Mapper接口。 在前端方面,你可以使用LayUI的表格组件来展示数据库中的数据。你需要发送一个Ajax请求到后台,然后在后台通过MyBatis查询数据库中的数据,并将结果返回给前端。在前端收到数据之后,你可以使用LayUI的表格组件来展示数据。 下面是一个简单示例: 1. 创建Mapper接口 ```java @Mapper public interface UserMapper { @Select("SELECT * FROM user") List<User> getUsers(); } ``` 2. 配置MyBatis 在application.properties或application.yml中添加数据库配置: ```properties spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&allowMultiQueries=true&useSSL=false&serverTimezone=Asia/Shanghai spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver mybatis.mapper-locations=classpath:mapper/*.xml ``` 3. 创建Controller ```java @RestController public class UserController { @Autowired private UserMapper userMapper; @GetMapping("/users") public List<User> getUsers() { return userMapper.getUsers(); } } ``` 4. 编写前端代码 ```html <table class="layui-table"> <thead> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> </tr> </thead> <tbody id="userList"> </tbody> </table> <script> $(function () { $.get('/users', function (data) { var html = ''; $.each(data, function (i, user) { html += '<tr>'; html += '<td>' + user.id + '</td>'; html += '<td>' + user.username + '</td>'; html += '<td>' + user.email + '</td>'; html += '</tr>'; }); $('#userList').html(html); }); }); </script> ``` 这样,当页面加载完成时,会自动发送一个Ajax请求到后台获取用户列表,并将结果展示在表格中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值