将图片转换成Base64格式存入数据库以及在前端页面展示

这篇具有很好参考价值的文章主要介绍了将图片转换成Base64格式存入数据库以及在前端页面展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Base64;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

public class ImageToBase64 {
  
  private DataSource dataSource; // 数据源,需要根据实际情况进行注入或初始化

  public void saveImageToDB(String imagePath) {
    File imageFile = new File(imagePath);
    try (FileInputStream fis = new FileInputStream(imageFile)) {
      byte[] imageData = new byte[(int) imageFile.length()];
      fis.read(imageData);
      String base64Image = Base64.getEncoder().encodeToString(imageData);
      saveToDatabase(base64Image);
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

  private void saveToDatabase(String base64Image) {
    try (Connection conn = dataSource.getConnection();
         PreparedStatement ps = conn.prepareStatement("INSERT INTO images (base64_image) VALUES (?)")) {
      ps.setString(1, base64Image);
      ps.executeUpdate();
    } catch (SQLException e) {
      e.printStackTrace();
    }
  }
}

这个示例接口假设已经有了一个数据库连接池,并且已经注入或初始化了数据源。这个接口的功能是读取指定路径的图片文件,将其转换为Base64编码字符串,然后将其存入数据库中。可以通过调用saveImageToDB方法来实现这个功能。调用该方法时需要传入要存储的图片文件的路径。

 

 

在数据库中存储Base64格式的图片时,通常使用BLOB类型或者LONGTEXT类型。其中,BLOB类型适用于存储二进制数据,而LONGTEXT类型适用于存储较长的文本数据,包括Base64编码的字符串。

如果你使用MySQL数据库,可以使用以下语句来创建一个可以存储Base64格式图片的表:

CREATE TABLE image_table (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    image LONGBLOB
);

其中,image列用于存储Base64编码的图片数据,LONGBLOB类型可以存储最大长度为4GB的二进制数据,足以存储大多数图片数据。

在Vue前端中展示Base64格式的图片,可以使用<img>标签,并将其src属性设置为Base64编码的字符串。以下是一个简单的Vue组件示例,可以将Base64编码的图片数据渲染为图片:

<template>
  <div>
    <img :src="base64Image" alt="Image" />
  </div>
</template>

<script>
export default {
  props: {
    image: {
      type: String,
      required: true,
    },
  },
  computed: {
    base64Image() {
      return `data:image/jpeg;base64,${this.image}`;
    },
  },
};
</script>

在这个示例中,组件接收一个Base64编码的图片数据作为属性,然后通过计算属性将其转换为data URI格式的图片,最后渲染为<img>标签。

注意:在实际开发中,可能需要根据具体情况调整计算属性中的data URI格式和图片类型。文章来源地址https://www.toymoban.com/news/detail-560392.html

到了这里,关于将图片转换成Base64格式存入数据库以及在前端页面展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 将前端传过来的String的日期数据转换成LocalDateTime类型的数据存入数据库

    String类型的xxxx年x月xx日与LocalDateTime类型的 yyyy-mm-dd相互转化 1.导入DataUtil工具类 2.调用工具类 3.输出结果

    2024年04月13日
    浏览(44)
  • NodeJS 后端通过Http获取Base64格式数据显示图片 ②〇

    Node.js 是一个javascript运行环境。它让javascript可以开 发后端程序 ,实现几乎其他后端语言实现的所有功能,可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。 Nodejs是基于V8引擎,V8是Google发布的开源JavaScript引擎,本身就是用于Chrome浏览器的JS解释,但是Node之父 Ryan Dah

    2024年02月16日
    浏览(70)
  • uni-file-picker上传图片到后端服务器并存入数据库

    最近在做一个需求,使用uniapp上传用户头像。后端会有一个处理上传图片返回图像链接的接口。在uniapp官网关于上传的组件有两个: (1)uni.uploadFile(object) (2)uni-file-picker 如果使用uni.uploadFile,前端的代码大致可以这样写: 这是官网给出的范例。对应的HTML: 然后就是 自

    2024年02月12日
    浏览(44)
  • 微信小程序常见图片格式转base64图片

    1、在utils文件下新建一个auth.js文件(随便取一个名字,你开心就行),在里面添加以下代码 如果是网络图片需要先使用wx.downloadFile({...})下载之后才可进行转换,本地的则直接转换即可你可根据具体需求修改代码,不要受此处代码影响。 2、在你需要使用的地方引入

    2024年02月06日
    浏览(55)
  • 前端 base64与图片相互转换

    base64转图片 如下图:(后端返回的数据) base64转换图片文件 图片(url)转换base64 便捷的图片转化base64 利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    2024年02月12日
    浏览(52)
  • vue图片上传并转化base64格式

    组建中有一个@change=\\\"xxx\\\"方法,图片上传时会调用这个方法,在这个方法中可以拿到上传图片的一些数据,可以对图片数据进行处理 转化base64格式 传入的文件格式 FileReade r接口提供了读取文件的方法和包含读取结果的事件模型。 readAsDataURL :这是例子程序中用到的方法,该方法

    2024年02月16日
    浏览(55)
  • vue 图片转base64格式的方法

    require的方式 用vue引入图片的require方式获取的值可以直接生成base64格式,但是该方法只适用于5kb大小以下的图片 canvas.toDataURL() 该方法canvas.toDataURL(`image/${ext}`)传入的图片类型是什么生成后的base64数据前缀就是什么类型,如果传入的类型和生成的类型不同,则表示该方法不支持

    2023年04月08日
    浏览(45)
  • 前端获取本地图片并且转化为base64格式

    今天看见网上各位大佬五花八门的前端图片获取并转化为base64格式的操作,果然高手在民间,很神奇,没想到有这么多方法,那我也来写一个我自己的方法 我是习惯使用filereader这个内置类,感觉比较简单,不用管内部原理,反正可以获取图片,实现在互联网上的传输就可以

    2024年02月09日
    浏览(61)
  • 图片转为base64格式的优缺点分析

    1. 优点 (1)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。 (2)base64编码的字符串,更适合不同平台、不同语言的传输; (3)算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很

    2024年02月05日
    浏览(49)
  • 如何将图片转化为base64编码格式显示

    base64编码 是将数据用 64 个可打印的字符进行编码的方式,任何数据底层实现都是二进制,所以都可以进行 base64编码,base64编码 主要用在数据传输过程中(编码、解码)。而 Data URI 是将数据用 URI 的形式进行展现。常用的是将图片进行 base64 编码,用 Data URI 的形式进行展现,可

    2024年02月06日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包