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

最新推荐文章于 2024-08-25 04:06:33 发布

原创最新推荐文章于 2024-08-25 04:06:33 发布 · 5.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #前端 #java

此Java示例展示了如何读取图片文件，将其转换为Base64编码，然后存储到数据库。数据库表使用BLOB类型存储Base64图像。在Vue前端，可以将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格式和图片类型。