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

news2024/11/24 14:02:12

目录

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{

    @Autowired
    private imagemapper imagemapper;

    @Override
    public 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 {
    @Autowired
    private 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{

    @Autowired
    private imagemapper imagemapper;

    @Override
    public void inser(String name, FileInputStream file) {
        imagemapper.inser(name,file);
    }

    @Override
    public 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 {
    @Autowired
    private 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://www.coloradmin.cn/o/1962850.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】模板的特化

【C++】模板的特化

文章目录 概念函数模板特化类模板特化全特化偏特化 概念 通常情况下&#xff0c;使用模板可以实现一些与类型无关的代码&#xff0c;但是有一些类型需要特殊处理&#xff0c;否则可能会得到一些错误的结果。 比如&#xff0c;在比较两个数的大小时&#xff0c;如果传入两个变量…
阅读更多...
RAG+AI工作流+Agent：LLM框架该如何选择，全面对比MaxKB、Dify、FastGPT、RagFlow、Anything-LLM,以及更多推荐

RAG+AI工作流+Agent：LLM框架该如何选择，全面对比MaxKB、Dify、FastGPT、RagFlow、Anything-LLM,以及更多推荐

RAGAI工作流Agent&#xff1a;LLM框架该如何选择&#xff0c;全面对比MaxKB、Dify、FastGPT、RagFlow、Anything-LLM,以及更多推荐 1.MaxKB MaxKB Max Knowledge Base&#xff0c;是一款基于 LLM 大语言模型的开源知识库问答系统&#xff0c;旨在成为企业的最强大脑。它能够帮…
阅读更多...
MySQL：存储引擎相关命令、性能比较

MySQL：存储引擎相关命令、性能比较

目录 存储引擎 概念 类型 示例 数据库文件 MylSAM .frm .MYD .MYI InnoDB .frm .ibd .opt 查看指定表的存储引擎类型 查看系统支持的存储引擎 修改存储引擎 通过配置文件指定存储引擎 使用alter修改 创建表的同时指定存储引擎 使用set命令临时指定存储引擎…
阅读更多...
java入门-API学习

java入门-API学习

package API;//告诉编译器&#xff0c;编译之后应该放到哪个包里import API.try3.test3; import API.try3.test5; import itcast.test2;import java.util.Random; import java.util.Scanner;//导包 public class Introduce {public static void main(String[] args) {//别忘记写…
阅读更多...
为何2024年这4款ai智能写作工具被赞为YYDS？

为何2024年这4款ai智能写作工具被赞为YYDS？

在数字化的大潮中&#xff0c;人工智能已经深入到我们生活的各个角落&#xff0c;当然也包括写作领域。随着ai智能写作工具的兴起&#xff0c;它们不仅显著提升了写作效率&#xff0c;还为创作打开了全新的可能性。今天&#xff0c;我们就来看看四款特别受欢迎的AI写作工具&…
阅读更多...
QT log4qt 记录日志

QT log4qt 记录日志

一.环境 Qt 5.15.2 log4qt 二.源码 1.编译 log4qt 源码,生成dll文件,并将.h 拷贝至项目目录 2.main.cpp #include "mainwindow.h"#include <QApplication> #include <QDir> #include "Log4Qt/logmanager.h" #include "Log4Qt/pattern…
阅读更多...
职场离职潮：年轻人的选择与挑战

职场离职潮：年轻人的选择与挑战

近年来&#xff0c;随着社会的发展和个人价值观的变化&#xff0c;越来越多的人开始主动或被动地离开职场。这一现象在社交网络上引发了广泛的讨论&#xff0c;甚至出现了专门分享离职经历的“离职博主”。为了深入了解这一趋势背后的真实情况&#xff0c;近日相关机构展开了一…
阅读更多...
【传输层协议】UDP和TCP协议

【传输层协议】UDP和TCP协议

UDP协议 UDP协议全称为User Datagram Protocol&#xff0c;用户数据报协议。UDP协议报文格式如下&#xff1a; 16UDP长度。表示整个数据报的最大长度&#xff0c;即UDP首部UDP数据。这个字段帮助我们确保在网络字节流中获取完整的UDP报文信息。校验和&#xff1a;用于检测数…
阅读更多...
法兰式满油阀SPF-125-12C、STF-125-12C

法兰式满油阀SPF-125-12C、STF-125-12C

法兰式满油阀又名预充阀、充液阀&#xff0c;合金钢和球墨铸铁材质&#xff0c;体积小&#xff0c;易于拆卸&#xff0c;低压损&#xff0c;流量大&#xff0c;构造简单&#xff0c;耐久性佳&#xff0c;可直接装置于油缸盖侧&#xff0c;SPF-32-12C、STF-32-12C、SPF-50-12C、…
阅读更多...
ZooKeeper中间件监控指标解读

ZooKeeper中间件监控指标解读

监控易是一款功能全面的IT监控软件&#xff0c;能够实时监控各类IT资源和应用的状态&#xff0c;包括中间件、数据库、网络设备等。对于ZooKeeper这一重要的分布式协调服务中间件&#xff0c;监控易提供了详尽的监控指标&#xff0c;帮助用户全面了解ZooKeeper集群的运行状态。…
阅读更多...
鸿蒙（API 12 Beta2版）NDK开发【使用Node-API接口进行异步任务开发】

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

使用Node-API接口进行异步任务开发 场景介绍 napi_create_async_work是Node-API接口之一&#xff0c;用于创建一个异步工作对象。可以在需要执行耗时操作的场景中使用&#xff0c;以避免阻塞主线程&#xff0c;确保应用程序的性能和响应性能。例如以下场景&#xff1a; 文件…
阅读更多...
最新版Polyverse - Music Bundle Deal [06.2024]，win和mac，支持intel和M1芯片

最新版Polyverse - Music Bundle Deal [06.2024]，win和mac，支持intel和M1芯片

一。Polyverse插件套装 Polyverse - Music Bundle Deal 1.释放您的创作潜力 无论您是希望突破创作极限的音乐制作人&#xff0c;还是寻求新颖创新方式来增强混音的音频工程师&#xff0c;Polyverse 捆绑包交易都具有非凡的价值&#xff0c;可以帮助您将音乐提升到一个新的水平…
阅读更多...
【数学建模】【优化算法】：【MATLAB】从【一维搜索】到】非线性方程】求解的综合解析

【数学建模】【优化算法】：【MATLAB】从【一维搜索】到】非线性方程】求解的综合解析

目录 第一章&#xff1a;一维搜索问题 黄金分割法 股票交易策略优化 总结&#xff1a; 第二章&#xff1a;线性规划 线性规划&#xff08;Simplex 算法&#xff09; 生产计划优化 总结&#xff1a; 第三章&#xff1a;无约束非线性优化问题 梯度下降法 神经网络训练…
阅读更多...
Python中导入不同文件夹中的函数

Python中导入不同文件夹中的函数

1、代码举例&#xff1a;from Python_CodeFile.LDAP3.del_file.Get_Computer_Dn import get_computer_dn # 以上代码导入路径为&#xff1a;Python_CodeFile/LDAP3/del_file/Get_Computer_Dn.py 文件中的get_computer_dn函数。
阅读更多...
传统放牧方式与北斗科技的碰撞：北三短报文头羊定位追踪器PD28守护放牧生活

传统放牧方式与北斗科技的碰撞：北三短报文头羊定位追踪器PD28守护放牧生活

在大草原的广袤天地中&#xff0c;放牧生活是蒙古族人民的传统之一。然而&#xff0c;除了美丽和自由&#xff0c;放牧生活也伴随着一些危险。以前由于科技落后&#xff0c;人工成本低&#xff0c;主要依靠人力去放牧&#xff0c;牧民放牧顶风踏雪走个几十公里都极为寻常。除了…
阅读更多...
AI识别智能称重-收银系统源码

AI识别智能称重-收银系统源码

系统概况 专门为零售行业的连锁店量身打造的收银系统&#xff0c;适用于常规超市、生鲜超市、水果店、便利店、零食专卖店、服装店、母婴用品、农贸市场等类型的门店使用。同时线上线下数据打通&#xff0c;线下收银的数据与小程序私域商城中的数据完全同步&#xff0c;如商品…
阅读更多...
【ROS 最简单教程 005/300】ROS + VSCode 开发环境快速搭建

【ROS 最简单教程 005/300】ROS + VSCode 开发环境快速搭建

VSCode 全称 Visual Studio Code&#xff0c;是微软出的一款轻量级代码编辑器&#xff0c;免费、开源而且功能强大 本篇将以最简单的方法引导基于 VSCode 的&#xff0c;超全面开发环境的搭建及相关配置完全不了解 ROS 编程的友友&#xff0c;建议先看 &#x1f449;快速体验 指…
阅读更多...
WIFI7在游戏领域引发的变革

WIFI7在游戏领域引发的变革

随着无线技术的快速进步&#xff0c;游戏体验正变得愈加丰富、复杂和逼真。现在最新的WIFI 7技术将带来新的飞跃&#xff0c;不仅有望重新定义网络游戏的体验&#xff0c;还有可能彻底革新整个游戏产业。可以想象一下&#xff0c;在未来&#xff0c;游戏世界不再有延迟和连接中…
阅读更多...
【嵌入式】一种基于串口命令的模块测试API模板

【嵌入式】一种基于串口命令的模块测试API模板

本文主要记录一种用于嵌入式开发中【模块测试】通用模板&#xff0c;使用 getopt_long()函数作为串口命令行解析的工具&#xff0c;从而进行测试代码逻辑的编写。 本文以ADC 和 uart 测试为例&#xff0c;介绍函数的使用以及测试代码的编写 【测试环境说明 】 本文是在 rt-thr…
阅读更多...
一篇长文搭建AI大模型应用平台架构

一篇长文搭建AI大模型应用平台架构

在研究了6家知名公司如何部署生成式AI应用程序后&#xff0c;注意到它们的平台有很多相似之处。概述了生成式AI大模型应用平台的常见组件、它们的作用以及它们的实现方式。尽力保持架构的通用性&#xff0c;但某些应用程序可能会有所不同。 Generative AI大模型应用平台整体架…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023