Java实现数据库图片上传(包含从数据库拿图片传递前端渲染)-图文详解

目录

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博客上有,各位可以去看看。

建表语句:

create table test2(id int auto_increment primary key ,name varchar(100) comment '名称',photo blob comment '照片'
)

 3、后端实现,将图片存储进数据库:

思想:

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

1、找到图片位置

2、图片转为Fileinputstream流

3、存储数据库

 找到图片位置(如下图操作)

 图片转为Fileinputstream流的工具类(可直接copy)

package com.example.jishedemo2.img;import java.io.*;public class imgeuntil {/*** @author Administrator**/// 读取本地图片获取输入流public static FileInputStream readImage(String path) throws IOException {return new FileInputStream(new File(path));}// 读取表中图片获取输出流public static void readBin2Image(InputStream in, String targetPath) {File file = new File(targetPath);String path = targetPath.substring(0, targetPath.lastIndexOf("/"));if (!file.exists()) {new File(path).mkdir();}FileOutputStream fos = null;try {fos = new FileOutputStream(file);int len = 0;byte[] buf = new byte[1024];while ((len = in.read(buf)) != -1) {fos.write(buf, 0, len);}fos.flush();} catch (Exception e) {e.printStackTrace();} finally {if (null != fos) {try {fos.close();} catch (IOException e) {e.printStackTrace();}}}}}

存储数据库 

 mapper层:

package com.example.jishedemo2.img;import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;@Mapper
public interface imagemapper {@Insert("insert into test2 values(null,#{name},#{photo})")void inser(String name,  FileInputStream photo);}

 service层:

package com.example.jishedemo2.img;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.io.FileInputStream;
import java.util.List;@Service
public class imageservice implements imge{@Autowiredprivate imagemapper imagemapper;@Overridepublic void inser(String name, FileInputStream file) {imagemapper.inser(name,file);}}

 control层:

package com.example.jishedemo2.img;import com.example.jishedemo2.dao.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.FileInputStream;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.util.List;@RestController
public class imgedemo {@Autowiredprivate imageservice imageservice;// 将图片插入数据库@PostMapping("test3")public  void readImage2DB() throws IOException {String path = "D:\\wsstext.png";try {FileInputStream in = null;in = imgeuntil.readImage(path);imageservice.inser("测试",in);in.close();} catch (IOException e) {e.printStackTrace();}}}

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

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

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

dao层:

package com.example.jishedemo2.img;import java.io.FileInputStream;
import java.io.InputStream;public class photo {int id;String name;byte[] photo;public photo() {}public photo(int id, String name, byte[] photo) {this.id = id;this.name = name;this.photo = photo;}/*** 获取* @return id*/public int getId() {return id;}/*** 设置* @param id*/public void setId(int id) {this.id = id;}/*** 获取* @return name*/public String getName() {return name;}/*** 设置* @param name*/public void setName(String name) {this.name = name;}/*** 获取* @return photo*/public byte[] getPhoto() {return photo;}/*** 设置* @param photo*/public void setPhoto(byte[] photo) {this.photo = photo;}public String toString() {return "photo{id = " + id + ", name = " + name + ", photo = " + photo + "}";}
}

mapper层:

package com.example.jishedemo2.img;import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;@Mapper
public interface imagemapper {@Insert("insert into test2 values(null,#{name},#{photo})")void inser(String name,  FileInputStream photo);@Select("select * from test2")List<photo> select();}

service层:

package com.example.jishedemo2.img;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.io.FileInputStream;
import java.util.List;@Service
public class imageservice implements imge{@Autowiredprivate imagemapper imagemapper;@Overridepublic void inser(String name, FileInputStream file) {imagemapper.inser(name,file);}@Overridepublic List<photo> select() {return imagemapper.select();}
}

control层:

package com.example.jishedemo2.img;import com.example.jishedemo2.dao.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.FileInputStream;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.util.List;@RestController
public class imgedemo {@Autowiredprivate imageservice imageservice;// 将图片插入数据库@PostMapping("test3")public  void readImage2DB() throws IOException {String path = "D:\\wsstext.png";PreparedStatement ps = null;try {FileInputStream in = null;in = imgeuntil.readImage(path);imageservice.inser("测试",in);in.close();} catch (IOException e) {e.printStackTrace();}}//传数据@PostMapping("test4")public Result select(){List<photo> photos = imageservice.select();return Result.success(photos);}}

前端拿到效果: 

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并将其作为图像内容显示在页面上,而无需从外部服务器加载图像。

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

<template><div>  <img v-if="imageUrl" :src="imageUrl" alt="Image from backend" />  </div>  
</template><script>
import axios from 'axios'
export default {data() {return {imageUrl: null}},mounted(){axios.post("http://localhost:8080/test4").then((e) => {this.imageUrl= "data:image/png;base64," + e.data.data[0].photo;})}

尾言 

 🏆🏆🏆在本文中,我们深入探讨了如何使用Java实现数据库中的图片上传功能,并详细展示了如何将存储于数据库中的图片数据有效地传递到前端进行渲染。通过整合Spring Boot框架的便利性与数据库管理系统的强大功能,我们构建了一个高效、安全的图片管理系统。不仅实现了图片的上传与存储,还通过接口设计,使得前端能够灵活请求并展示这些图片资源。希望本教程能够为您的项目开发提供有力的技术支持与灵感启发。随着技术的不断进步,未来我们还将继续探索更多关于图像处理与传输的优化方案,以满足日益增长的业务需求。感谢您的阅读,期待与您一同在技术的道路上不断前行!🏆🏆🏆

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3281401.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

系统学习渗透测试:从零到精通的全面指南

渗透测试&#xff0c;作为网络安全领域的一项重要技术&#xff0c;旨在通过模拟黑客攻击来评估计算机系统的安全性。对于想要系统学习渗透测试的人来说&#xff0c;这既是一条充满挑战的道路&#xff0c;也是一次深入了解网络安全的宝贵机会。本文将从基础知识、技能提升、实战…

【释放品牌魅力,开启营销新篇章】—— 短视频矩阵营销系统源码

【释放品牌魅力&#xff0c;开启营销新篇章】—— 短视频矩阵营销系统在这个数字化高速发展的时代&#xff0c;您是否还在为品牌曝光度不足、营销效果不佳而苦恼&#xff1f;来吧&#xff0c;让我们一起探索全新的解决方案——短视频矩阵营销系统&#xff01; 在这个数字化高速…

NC 缺失的第一个正整数

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 给定一个无重…

AI初学者必看: 什么是大型语言模型 (LLM)?

介绍 “人工智能&#xff08;AI&#xff09;”一词于 1956 年问世&#xff0c;如今已为大家所熟知。然而&#xff0c;在 ChatGPT 迅速流行之前&#xff0c;AI 的使用和讨论大多局限于科学研究或虚构电影。如今&#xff0c;AI 尤其是生成式 AI 已成为大家热议的话题。 初学者生…

详解校门外的树(树状数组)

前言 在看之前建议先看一下 【学习笔记】详解树状数组-CSDN博客 题目 思路 建立两个树状数组,维护左括号与右括号。 假设有一个长度为10的数轴&#xff0c;我们要将区间[ 2 , 5 ]中种树&#xff0c;这时&#xff0c;我们将 2 处放一个左括号 ” ( ” ,5处放一个 ” )” &…

3DMAX神经网络插件Neuron使用方法详解

3DMAX神经网络插件Neuron使用方法 3DMAX神经网络插件Neuron&#xff0c;从一系列样条曲线创建具有分支结构的几何体。适用于如神经网络、血管、树枝等形状的3D建模。 【适用版本】 3dMax2016及更高&#xff08;不仅限于此范围&#xff09; 【安装方法】 Neuron插件无需安装&a…

【C++】跳转语句-continue语句

continue语法特点&#xff1a; 中止循环后会继续执行下面循环&#xff08;除了continue所跳出的那些执行操作不会执行&#xff09; 这也是额continue语句和break语句最大的区别 break是直接跳出循环不再执行下面步骤 #include<iostream> using namespace std;int main…

收集树中的金币

提示 1 定义一个点的度数为其邻居个数。如果一个点的度数为 1&#xff0c;那么这个点叫做叶子节点&#xff0c;例如示例 2 的 3,4,6,7 都是叶子节点。 如果叶子节点没有金币&#xff0c;我们有必要移动到叶子节点吗&#xff1f;没有必要。 那么可以先把这些没有金币的叶子节点…

等保学习干货|等保测评2.0技术中间件自查阶段,零基础入门到精通,收藏这一篇就够了

0x01 前言 以下是根据我国网络安全体系制订的一系列保护流程进行的等级保护测评。该测评针对已有和将上线的业务服务的基础设施&#xff08;系统、数据库、中间件等&#xff09;&#xff0c;执行一系列检查以确保安全合规。本次先行分享学习等保中的技术自查阶段知识&#xff…

Android GreenDao 升级 保留旧表数据

Android GreenDao 升级 保留旧表数据 大川的川关注IP属地: 北京 0.2052019.08.05 11:54:36字数 270阅读 363 瓦力和伊娃 GreenDao升级库版本号之后&#xff0c;以前的旧数据没有了&#xff0c;为啥&#xff0c;因为GreenDao在升级的时候会删除旧库&#xff0c;创建新库&#…

【超详细含图】Ubuntu系统忘记root密码的解决方法

1.启动或者重启Ubuntu长按shift进入grub菜单&#xff1b; 选第二个&#xff0c;按住e进入 2.选择recovery mode进入Recovery Menu界面&#xff0c; 选择root Drop to root shell prompt* 3.修改root密码操作&#xff1a; #passwd 输入新密码&#xff1a;# 再输入一遍密码&…

LLM之本地部署GraphRAG(GLM-4+Xinference的embedding模型)(附带ollma部署方式)

前言 有空再写 微软开源的GraphRAG默认是使用openai的接口的&#xff08;GPT的接口那是要money的&#xff09;&#xff0c;于是就研究了如何使用开源模型本地部署。 源码地址&#xff1a;https://github.com/microsoft/graphrag 操作文档&#xff1a;https://microsoft.git…

springBoot+protobuf(全程Protocol Buffers协议)简单入门

了解Protocol Buffers协议 Protocal Buffers是google推出的一种序列化协议&#xff0c;用于结构化的数据序列化、反序列化。 官方解释&#xff1a;Protocol Buffers 是一种语言无关、平台无关、可扩展的序列化结构数据的方法&#xff0c;它可用于&#xff08;数据&#xff09;通…

鸿蒙(API 12 Beta2版)NDK开发【使用Node-API接口进行异步任务开发】

使用Node-API接口进行异步任务开发 场景介绍 napi_create_async_work是Node-API接口之一&#xff0c;用于创建一个异步工作对象。可以在需要执行耗时操作的场景中使用&#xff0c;以避免阻塞主线程&#xff0c;确保应用程序的性能和响应性能。例如以下场景&#xff1a; 文件…

入门 PyQt6 看过来(案例)17~ 表格

PyQt6提供了两种用于有规律地呈现更多数据的控件&#xff0c;一种是表格结构的控件(QTableView)&#xff0c;另一种是树形结构的控件(QTreeView)。表格控件属于QTableView类&#xff0c;QTableWidget继承于QTableView。 1 QTableView 表格控件 QTableView控件中QStandItemMod…

IT人求职就业手册:如何在数字时代脱颖而出

&#x1f482; 个人网站:【 摸鱼游戏】【网址导航】【神级代码资源网站】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

【CodinGame】趣味算法(教学用) CLASH OF CODE -20240731

文章目录 正文闰年偶数和密码塔楼高度 写在最后END 正文 闰年 import sys import math# Auto-generated code below aims at helping you parse # the standard input according to the problem statement.a int(input()) b int(input()) count0 for i in range(a, b 1):if…

DELL服务器RAID配置详细教程

DELL服务器RAID配置教程 在启动电脑的时候按CTRLR 进入 RAID 设置见面如下图 名称解释&#xff1a; Disk Group&#xff1a;磁盘组&#xff0c;这里相当于是阵列&#xff0c;例如配置了一个RAID5&#xff0c;就是一个磁盘组 VD(Virtual Disk)&#xff1a; 虚拟磁盘&#xff…

开启智能开发的新纪元:探索 GPT-4o mini 模型的无限可能

引言 随着人工智能技术的飞速发展&#xff0c;大型语言模型已成为推动软件开发和创新的关键力量。OpenAI 最新发布的 GPT-4o mini 模型以其卓越的性能和极具竞争力的价格&#xff0c;为开发者社区带来了新的活力。本文将探讨 GPT-4o mini 模型的特性&#xff0c;以及它如何帮助…

K8S第二节:kubeadm搭建K8s集群

上回书说到什么是K8s&#xff0c;这回就在我自己的虚拟机上搭建一个K8s集群; 一、安装K8S需要的软件包 yum install -y kubelet-1.23.1 kubeadm-1.23.1 kubectl-1.23.1 其中&#xff1a; kubelet:是K8s集群中每个node节点上的管家&#xff0c;用来处理Master节点下发到本节点的…