需求:

业务场景:图片在前端上传到服务器进行保存,然后读取到前端进行展示。

实现方式说明:

该业务场景有多种实现方式,我们根据不同的场景选择合适的实现方式。本篇主要介绍的是图片由前端调用接口传递给后端后,由后端直接保存到数据库中保存,读取时后端直接将图片以流的方式返回给前端来实现;

本篇只列举后端代码,保存图片时既保存了原图,也保存了缩略图;

实现步骤:

1、前期准备

1.1 创建可以保存图片的表结构

图片是以blob的类型在数据库进行保存的,考虑到原图有可能会比较大,所以采用了longblob;

特别提醒:如果图片比较大,则采用longblob方式进行保存;

1.2 在springboot中创建该表的实体类

特别提醒:保存文件的数据库字段对应的实体类的类型为byte[],不需要特殊转换,mybatis中查询指定到该实体类后就可以直接读取出来;

其他的分成没有特殊的地方,不再赘述;

2、实现图片上传并将图片保存到数据库中

2.1 接口接收并传给实现类处理

接口已MultipartFile接收文件,MultipartFile不光可以接收图片,还可以接收Excel、word等文件,Controller层不对数据进行处理,只做必要的验证和异常信息的拦截;

2.2 实现类处理文件并调用mapper保存

MultipartFile可以直接通过 .getBytes() 获取到byte[] 然后直接调用Mapper通用接口进行保存;缩略图的话,需要导入依赖thumbnailator,Thumbnailator 是一个优秀的图片处理的Google开源Java类库。处理效果远比Java API的好,功能十分强大,可以进行缩略、旋转、按比例缩略、裁剪等操作,最后通过BufferedImage也是保存为byte[] 类型数据进行保存;

进行到这里,图片就可以已blob的类型保存到数据库中了,下边来介绍一下如何通过 从数据库获取图片展示到前端

3、从数据库获取图片数据供前端展示

要实现此功能的话,难点有两处。第一,从数据库中查询出来到变量中,二是以文件流的方式输出到前端,来看看具体实现吧;

3.1 从数据库中查询出来还原到byte[] 中

我实验了好多种方式,都没能实现该效果,最后采用了xml文件中指向实体类的方式,mapper采用实体类接收数据,虽然用起来比较鸡肋,但是没办法,先实现功能吧,欢迎有其他好办法的小伙伴指教;

特别提醒:虽然采用了实体类接收,但是还是建议用到哪个字段返回哪个字段,不要所有数据都差出来,因为图片还是比较大的,会严重影响使用效率;

3.2 以文件流的方式输出到前端

注意最后关闭流哦!

#@lehao#

帮助到您请点赞关注收藏谢谢!!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐