将图片转换成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格式和图片类型。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值