前后端通过blob传送图片

创作灵感

最近在写自己的一个项目时，又涉及到了图片的交互。总体而言，前后端图片的交互有两种方式，一种是将图片保存在服务器，前端可以直接通过访问服务器的资源拿到图片。这种方法在我之前的文章已经有过介绍了，具体参考后端如何让前台访问到图片_后端保存的图片给前台访问-CSDN博客与前端向后台（SSM框架）传一张图片，看这一篇就够了_前端上传图片到后端-CSDN博客。但这一次，我想尝试另一种方法存储图片——将图片直接存储在数据库中。途中出现了许多坑，因此写下这篇文章，希望能够对大家有所帮助。

第一步，确定图片在数据库中的存储类型

时间有时间的存储类型，图片也有自己的存储类型。图片的存储类型为blob，在mysql中，一共有四个关于blob的类型，分别为tinyblob、blob、mediumblob与longblob。其实这四个都是blob类型，只是分配的空间不一样而已。这里我使用了mediumblob来存储图片，大家可以根据自己的情况选择类型。在选择完类型后，为大家补充一下blob的相关知识。所谓blob——即为二进制大对象，注意这个知识点，因为这将让你理解为什么后端在选择类型时要选择byte[]类型。

数据库的定义 

 第二步，确定java实体类的属性类型

在上一步中，我们已经提到，blob类型为二进制大对象，所以，在java实体类中的对应属性类型应该为byte[]，只有这样，才能服务器才能从数据库中拿到数据。

 java实体类的定义

第三步，前端发送blob数据给后台

前端获得选取文件后，要进行一次格式的转换，将file转换为base64，下方为微信小程序的转换方式，不同的情况下有不同的转换方式，大家根据自己是网页、小程序或者是App进行转换。这里我的请求是进行了封装的。

前端发送请求 

按照这种方式进行发送，就可以将图片以二进制流的方式发送给后台了。 

第四步，后端将接收到的数据擦插入表内

后端在接收到图片的二进制流后，插入数据库内的方法就和插入一条字符串或者数字一样，因此不再过多介绍。

第五步，前端接收到二进制流后进行显示

后端将二进制流发送给前端后，前端的显示方法如下：

步骤1：将blob流添加上头部信息："data:image/jepg;base64," 

 

 步骤2：将其作为iamge标签的src属性

到此，你已经可以做到前后端通过blob来存储和展示照片了。 

总结

在使用blob流来存储照片之前，我们必须先了解什么是blob。了解完blob以后，我们还需要了解怎么生成blob流已经在接收到blob流以后，如何将其转换为图片。为了让大家更好的了解blob，下面给大家看看blob在数据库内存储的样子与发送给前端的样子。

blob流（部分）

图片以blob形式存在数据库内 

最后，制作不易，希望大家点点关注吧！