devbox
Li_阴宅
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Java实现数据库图片上传（包含从数据库拿图片传递前端渲染）-图文详解_java从数据库中取出图片转成buffer 数据传给前端

作者：Li_阴宅 | 2024-08-18 06:23:55

赞

踩

java从数据库中取出图片转成buffer 数据传给前端

目录

1、前言：

2、数据库搭建 ：

建表语句：

 3、后端实现，将图片存储进数据库：

思想：

 找到图片位置（如下图操作）

 图片转为Fileinputstream流的工具类（可直接copy）

存储数据库 

 mapper层：

 service层：

 control层：

 4、后端实现，从数据库取出图片给前端（可直接看这个，这个给的是所有代码）

dao层：

mapper层：

service层：

control层：

前端拿到效果： 

5、前端拿到后端传递的json信息渲染到网页

解释 ：

如何实现渲染在网页：

尾言 

1、前言：

     我们使用数据库经常传递字符串、数字，但是很少在数据库存储图片、Word文件，我也去csdn找了找其他人的文章，只能说这类型的少的可怜，不是收费，就是讲的乱七八糟。既然如此，那么我将为需要这方面知识点的朋友写下这篇文章。本篇文章我们从以下几个方面：

  • 1、数据库搭建
  • 2、后端实现，将图片存储进数据库
  • 3、后端实现，从数据库取出图片给前端
  • 4、前端拿到后端传递的json信息渲染到网页

废话不多说，直接开始！

2、数据库搭建 ：

本次数据库我们选择比较经典的Mysql(只是因为我只会这个)，mysql提供一个字段类型叫做

blob，对于这个字段类型，我就不过多详细叙述，csdn博客上有，各位可以去看看。

建表语句：

  1. create table test2(
  2.     id int auto_increment primary key ,
  3.     name varchar(100) comment '名称',
  4.     photo blob comment '照片'
  5. )

 3、后端实现，将图片存储进数据库：

思想：

 思想：实际上我们可以通过字节流的形式，将图片转成二进制，然后将其保存在数据库里面。我们按照以下步骤：

1、找到图片位置

2、图片转为Fileinputstream流

3、存储数据库

 找到图片位置（如下图操作）

 图片转为Fileinputstream流的工具类（可直接copy）

  1. package com.example.jishedemo2.img;
  2.  
  3. import java.io.*;
  4.  
  5. public class imgeuntil {
  6.     /**
  7.      * @author Administrator
  8.      *
  9.      */
  10.  
  11.  
  12.         // 读取本地图片获取输入流
  13.         public static FileInputStream readImage(String path) throws IOException {
  14.             return new FileInputStream(new File(path));
  15.         }
  16.  
  17.         // 读取表中图片获取输出流
  18.         public static void readBin2Image(InputStream in, String targetPath) {
  19.             File file = new File(targetPath);
  20.             String path = targetPath.substring(0, targetPath.lastIndexOf("/"));
  21.             if (!file.exists()) {
  22.                 new File(path).mkdir();
  23.             }
  24.             FileOutputStream fos = null;
  25.             try {
  26.                 fos = new FileOutputStream(file);
  27.                 int len = 0;
  28.                 byte[] buf = new byte[1024];
  29.                 while ((len = in.read(buf)) != -1) {
  30.                     fos.write(buf, 0, len);
  31.                 }
  32.                 fos.flush();
  33.             } catch (Exception e) {
  34.                 e.printStackTrace();
  35.             } finally {
  36.                 if (null != fos) {
  37.                     try {
  38.                         fos.close();
  39.                     } catch (IOException e) {
  40.                         e.printStackTrace();
  41.                     }
  42.                 }
  43.             }
  44.         }
  45.     }
  46.

存储数据库 

 mapper层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import org.apache.ibatis.annotations.Insert;
  4. import org.apache.ibatis.annotations.Mapper;
  5. import org.apache.ibatis.annotations.Select;
  6.  
  7. import java.io.FileInputStream;
  8. import java.io.InputStream;
  9. import java.util.List;
  10.  
  11. @Mapper
  12. public interface imagemapper {
  13.  
  14.  @Insert("insert into test2 values(null,#{name},#{photo})")
  15.  void inser(String name,  FileInputStream photo);
  16.  
  17. }

 service层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  5.  
  6. import java.io.FileInputStream;
  7. import java.util.List;
  8.  
  9. @Service
  10. public class imageservice implements imge{
  11.  
  12.     @Autowired
  13.     private imagemapper imagemapper;
  14.  
  15.     @Override
  16.     public void inser(String name, FileInputStream file) {
  17.         imagemapper.inser(name,file);
  18.     }
  19.  
  20. }

 control层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import com.example.jishedemo2.dao.Result;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.web.bind.annotation.PostMapping;
  6. import org.springframework.web.bind.annotation.RestController;
  7.  
  8. import java.io.FileInputStream;
  9. import java.io.IOException;
  10. import java.sql.PreparedStatement;
  11. import java.util.List;
  12.  
  13. @RestController
  14. public class imgedemo {
  15.     @Autowired
  16.     private imageservice imageservice;
  17.  
  18.     // 将图片插入数据库
  19.     @PostMapping("test3")
  20.     public  void readImage2DB() throws IOException {
  21.         String path = "D:\\wsstext.png";
  22.         try {
  23.             FileInputStream in = null;
  24.             in = imgeuntil.readImage(path);
  25.             imageservice.inser("测试",in);
  26.             in.close();
  27.         } catch (IOException e) {
  28.             e.printStackTrace();
  29.         }
  30.     }
  31.  
  32.    
  33. }

没什么好说的，如果你不会javaweb，这边建议先去把javaweb学了。

 4、后端实现，从数据库取出图片给前端（可直接看这个，这个给的是所有代码）

这一步,多了一点，我们需要写一个类与数据库的表字段统一（dao层）

dao层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import java.io.FileInputStream;
  4. import java.io.InputStream;
  5.  
  6. public class photo {
  7.     int id;
  8.     String name;
  9.     byte[] photo;
  10.  
  11.     public photo() {
  12.     }
  13.  
  14.     public photo(int id, String name, byte[] photo) {
  15.         this.id = id;
  16.         this.name = name;
  17.         this.photo = photo;
  18.     }
  19.  
  20.     /**
  21.      * 获取
  22.      * @return id
  23.      */
  24.     public int getId() {
  25.         return id;
  26.     }
  27.  
  28.     /**
  29.      * 设置
  30.      * @param id
  31.      */
  32.     public void setId(int id) {
  33.         this.id = id;
  34.     }
  35.  
  36.     /**
  37.      * 获取
  38.      * @return name
  39.      */
  40.     public String getName() {
  41.         return name;
  42.     }
  43.  
  44.     /**
  45.      * 设置
  46.      * @param name
  47.      */
  48.     public void setName(String name) {
  49.         this.name = name;
  50.     }
  51.  
  52.     /**
  53.      * 获取
  54.      * @return photo
  55.      */
  56.     public byte[] getPhoto() {
  57.         return photo;
  58.     }
  59.  
  60.     /**
  61.      * 设置
  62.      * @param photo
  63.      */
  64.     public void setPhoto(byte[] photo) {
  65.         this.photo = photo;
  66.     }
  67.  
  68.     public String toString() {
  69.         return "photo{id = " + id + ", name = " + name + ", photo = " + photo + "}";
  70.     }
  71. }

mapper层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import org.apache.ibatis.annotations.Insert;
  4. import org.apache.ibatis.annotations.Mapper;
  5. import org.apache.ibatis.annotations.Select;
  6.  
  7. import java.io.FileInputStream;
  8. import java.io.InputStream;
  9. import java.util.List;
  10.  
  11. @Mapper
  12. public interface imagemapper {
  13.  
  14.  @Insert("insert into test2 values(null,#{name},#{photo})")
  15.  void inser(String name,  FileInputStream photo);
  16.  
  17.  @Select("select * from test2")
  18.  List<photo> select();
  19.  
  20.  
  21. }

service层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import org.springframework.beans.factory.annotation.Autowired;
  4. import org.springframework.stereotype.Service;
  5.  
  6. import java.io.FileInputStream;
  7. import java.util.List;
  8.  
  9. @Service
  10. public class imageservice implements imge{
  11.  
  12.     @Autowired
  13.     private imagemapper imagemapper;
  14.  
  15.     @Override
  16.     public void inser(String name, FileInputStream file) {
  17.         imagemapper.inser(name,file);
  18.     }
  19.  
  20.     @Override
  21.     public List<photo> select() {
  22.         return imagemapper.select();
  23.     }
  24. }

control层：

  1. package com.example.jishedemo2.img;
  2.  
  3. import com.example.jishedemo2.dao.Result;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.web.bind.annotation.PostMapping;
  6. import org.springframework.web.bind.annotation.RestController;
  7.  
  8. import java.io.FileInputStream;
  9. import java.io.IOException;
  10. import java.sql.PreparedStatement;
  11. import java.util.List;
  12.  
  13. @RestController
  14. public class imgedemo {
  15.     @Autowired
  16.     private imageservice imageservice;
  17.  
  18.     // 将图片插入数据库
  19.     @PostMapping("test3")
  20.     public  void readImage2DB() throws IOException {
  21.         String path = "D:\\wsstext.png";
  22.         PreparedStatement ps = null;
  23.         try {
  24.             FileInputStream in = null;
  25.             in = imgeuntil.readImage(path);
  26.             imageservice.inser("测试",in);
  27.             in.close();
  28.         } catch (IOException e) {
  29.             e.printStackTrace();
  30.         }
  31.     }
  32.  
  33.     //传数据
  34.     @PostMapping("test4")
  35.     public Result select(){
  36.  
  37.         List<photo> photos = imageservice.select();
  38.  
  39.         return Result.success(photos);
  40.     }
  41.  
  42.  
  43. }

前端拿到效果： 

5、前端拿到后端传递的json信息渲染到网页

 对于新手前端拿到photo，可能会很蒙蔽不知道这个是什么，我这里简要说一下：

解释 ：

这段文本是一个HTML (HyperText Markup Language) 编码的字符串，它嵌入了一个Base64编码的图像数据（以data:image/png;base64,开头的部分，但在这个示例中被截断了），并包含了一些CSS (Cascading Style Sheets) 样式和JavaScript（虽然直接看起来并不包含JavaScript代码，但可能是在某处被引用或嵌入的）。

具体来说，这个字符串包含以下几个部分：

  1. Base64编码的图像数据：这部分以data:image/png;base64,开头，后跟一长串字符，这些字符是图像的二进制数据经过Base64编码后的结果。

  2. CSS样式：字符串中包含了一些CSS样式，如i标签的样式定义（i { ... }），这些样式可能用于控制HTML文档中元素的显示方式。但在这个示例中，CSS样式是直接嵌入在HTML中的，并且由于格式和上下文的原因，可能不完整或难以直接应用。

  3. HTML结构：字符串中包含了HTML的基本结构，如<div>、<span>等标签，以及自定义的类或ID属性（如class="...", id="..."），这些用于在CSS中引用并应用样式。

  4. JavaScript的引用或嵌入：虽然直接在这个字符串中没有看到JavaScript代码，但通常HTML页面会包含JavaScript代码或引用外部JavaScript文件来控制页面的行为。这个字符串可能只是HTML页面的一部分，而JavaScript代码可能位于其他位置。

  5. 特殊字符和注释：字符串中还包含了一些特殊字符（如//开头的注释）和格式化字符（如换行符\n），这些在HTML和CSS中用于提高代码的可读性和可维护性。

综上所述，这段文本是一个HTML编码的字符串，它结合了Base64编码的图像数据、CSS样式和HTML结构，可能还隐式地引用了JavaScript代码。这种格式常用于在网页中嵌入图像、样式和脚本，以实现丰富的视觉效果和交互功能。

如何实现渲染在网页：

在前端网页中嵌入使用Base64编码的图像字符串，可以直接将这个字符串作为<img>标签的src属性的值。由于Base64编码的图像数据被封装在data: URL中，浏览器可以直接解析这个URL并将其作为图像内容显示在页面上，而无需从外部服务器加载图像。

以下是一个该字符串在前端网页中嵌入图像的示例：

  1. <template>
  2.    <div>  
  3.     <img v-if="imageUrl" :src="imageUrl" alt="Image from backend" />  
  4.   </div>  
  5. </template>
  6.  
  7. <script>
  8. import axios from 'axios'
  9. export default {
  10.   data() {
  11.     return {
  12.       imageUrl: null
  13.     }
  14.   },
  15.   mounted(){
  16.     
  17.     axios.post("http://localhost:8080/test4").then((e) => {
  18.       this.imageUrl= "data:image/png;base64," + e.data.data[0].photo;
  19.     })
  20.   
  21. }

尾言 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/996371
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。