Vue+SpringBoot简单的文件上传数据库页面对其进行获取(非存储路径)

一、数据库保存bety数组

1.在数据库一张表中建立存储文件二进制数据字段

对于BLOB 类型的定义：

        一个 BLOB 是一个可以保存一可变数量的数据的二进制大对象。另外还有三个兄弟类型（TINYBLOB、MEDIUMBLOB 和 LONGBLOB）它们之间的不同仅仅在于他们能保存值的最大长度不一致。

2.创建相关的实体类变量

        用byte[]存储二进制 

         控制器

         上传文件，控制器对文件进行获取，使用getBytes()方法把文件转换成Byte类型，当然你也可以使用其他方法对文件进行转换。 经过转换后的数据就可以直接使用方法进行文件存储到数据库的操作了。

3.数据库保存成功后我们看到的会是这样一个二进制的数据

 4.页面显示相关的图片，要对该数据进行操作，如图

 这里的item.image对应的就是数据库中保存的image字段的数据。

二、数据保存字符串（可以经过拼接保存多张图）

1.在数据库一张表中建立存储文件base64字符串数据字段

2.创建相关的实体类变量

 

 控制器

         主要思想就是先把文件先转换成byte类型然后在转换成字符串，为了方便前端获取，我这里后台处理的时候把图片解析的前缀一并加入了

3.数据库保存成功后我们看到的会是这样一个长长的字符串数据

         其实啊， 前面第一个方法数据库类型用longtext  数据库保存的数据也是这个，只是当时没有想到要存储多张图片的情况，就直接是打算保存二进制数据到数据库了，当然，一般的情况是用第二种哈。

4.页面显示相关的图片，要对该数据进行操作，如图

 这是页面获取图片的情况。

        大概就是这个样子了，由于对相关的知识不是不是很熟悉，刚开始接触一些小的功能，有介绍或者操作不对的地方欢迎通过留言评论加以指导。谢谢。

注：

直接把图片数据保存到数据库这种方法很浪费服务器带宽，一般不推荐直接存入数据库，普遍的都是存入云服务器上（七牛云、阿里云等），还有一种是直接保存本地服务器上，数据库保存相关路径。具体请看另外一篇博文：https://blog.csdn.net/qq_42498458/article/details/119538483