Java 实现数据库图片上传（包罗从数据库拿图片传递前端渲染） ...

瑞星 · 2025-5-9 14:04:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

在很多 Web 应用中，图像上传和展示是常见的功能。在本篇文章中，我们将展示如何使用 Java 实现一个图片上传功能，详细包括将图片存储到数据库中，并从数据库中读取图片传递给前端进行展示。
我们将分为以下几个部分来实现：

前端页面：上传图片并展示。
后端控制器：接收图片上传并生存到数据库，以及从数据库读取图片传递给前端。
数据库设计：设计存储图片的表。
Java后端代码：处理图片的上传、存储、读取和展示。

一、数据库设计

首先，我们必要设计一个数据库表来存储图片。一样平常来说，图片的存储有两种方式：存储文件路径或者直接存储图片的二进制数据。为了本例的目标，我们选择直接存储图片的二进制数据。
SQL 建表语句：

CREATE TABLE image (
id INT AUTO_INCREMENT PRIMARY KEY,
image_data LONGBLOB NOT NULL, -- 存储图片的二进制数据
image_name VARCHAR(255) NOT NULL -- 存储图片的名称
);

复制代码

在这个表中：

id：图片的唯一标识符。
image_data：存储图片的二进制数据，使用 LONGBLOB 类型来存储较大的图片数据。
image_name：存储图片的名称，方便展示和管理。

二、前端页面设计

前端部分使用 HTML 和 JavaScript 实现一个简单的图片上传表单。我们还必要一个用于展示图片的 <img> 标签。
HTML 页面（upload.html）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传</title>
</head>
<body>
<h2>图片上传</h2>
<form id="imageForm" enctype="multipart/form-data">
<label for="image">选择图片:</label>
<input type="file" id="image" name="image" accept="image/*" required><br><br>
<button type="submit">上传</button>
</form>
<hr>
<h2>已上传图片</h2>
<img id="uploadedImage" src="" alt="上传的图片将在这里显示" width="300" style="display: none;"/>
<script>
// 上传图片
document.getElementById("imageForm").onsubmit = async function(event) {
event.preventDefault();
const formData = new FormData();
formData.append("image", document.getElementById("image").files[0]);
try {
const response = await fetch("/upload", {
method: "POST",
body: formData
});
if (response.ok) {
const result = await response.json();
// 更新前端展示图片
const imgElement = document.getElementById("uploadedImage");
imgElement.src = `/image/${result.imageId}`;
imgElement.style.display = "block";
} else {
alert("上传失败！");
}
} catch (error) {
console.error("上传失败", error);
}
};
</script>
</body>
</html>

复制代码

说明：

通过 <form> 和 input[type="file"] 创建文件上传表单。
使用 fetch() 向服务器发送 POST 哀求，将图片上传到服务器。
上传乐成后，通过返回的 imageId 更新页面中的 <img> 标签的 src 属性，表现上传的图片。

三、后端代码实现

3.1 Spring Boot 后端设置

在后端，我们使用 Spring Boot 来处理图片上传和展示。
Maven 依赖（pom.xml）：

<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>

复制代码

3.2 实体类：Image

我们必要一个 Image 实体类来映射数据库表。

import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Lob;
@Entity
public class Image {
@Id
private Integer id;
private String imageName;
@Lob
private byte[] imageData;
// Getters and Setters
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getImageName() {
return imageName;
}
public void setImageName(String imageName) {
this.imageName = imageName;
}
public byte[] getImageData() {
return imageData;
}
public void setImageData(byte[] imageData) {
this.imageData = imageData;
}
}

复制代码

说明：

@Entity 注解表示该类为 JPA 实体类，与数据库表 image 映射。
@Id 注解表示 id 是主键。
@Lob 注解表示 imageData 是大对象类型，用来存储二进制数据。

3.3 Repository 接口

我们必要一个 Repository 接口来操作 Image 实体。

import org.springframework.data.jpa.repository.JpaRepository;
public interface ImageRepository extends JpaRepository<Image, Integer> {
}

复制代码

3.4 控制器：ImageController

接下来，我们必要创建一个控制器类来处理图片上传和展示的哀求。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
@Controller
public class ImageController {
@Autowired
private ImageRepository imageRepository;
// 图片上传
@PostMapping("/upload")
@ResponseBody
public ResponseEntity<?> uploadImage(@RequestParam("image") MultipartFile image) throws IOException {
Image img = new Image();
img.setImageName(image.getOriginalFilename());
img.setImageData(image.getBytes());
img = imageRepository.save(img);
return ResponseEntity.ok().body(new ImageResponse(img.getId()));
}
// 从数据库中读取图片并返回
@GetMapping("/image/{id}")
@ResponseBody
public ResponseEntity<byte[]> getImage(@PathVariable Integer id) {
Image image = imageRepository.findById(id).orElse(null);
if (image != null) {
return ResponseEntity.ok().body(image.getImageData());
} else {
return ResponseEntity.notFound().build();
}
}
// 用于上传后的返回对象
public static class ImageResponse {
private Integer imageId;
public ImageResponse(Integer imageId) {
this.imageId = imageId;
}
public Integer getImageId() {
return imageId;
}
public void setImageId(Integer imageId) {
this.imageId = imageId;
}
}
}

复制代码

说明：

上传图片：
- 通过 @PostMapping 接收前端上传的文件，MultipartFile 类型用于处理文件上传。
- 使用 image.getBytes() 获取图片的字节数组并生存到数据库中。
- 返回一个包罗图片 ID 的 JSON 响应，前端根据此 ID 来表现图片。
获取图片：
- 通过 @GetMapping 获取图片数据，使用 @PathVariable 获取路径中的图片 ID。
- 从数据库中查找图片数据，并通过 ResponseEntity<byte[]> 返回字节数组数据，如允许以直接返回图片给前端表现。

四、运行与测试

启动 Spring Boot 应用。
打开 upload.html 页面，选择一个图片文件并上传。
上传乐成后，页面会表现上传的图片。

五、总结

通过本篇文章，我们学习了如何使用 Java（Spring Boot）实现一个图片上传的功能，包括：

数据库设计：设计了一个用于存储图片数据的表。
前端实现：创建了一个简单的 HTML 页面来上传和展示图片。
后端实现：使用 Spring Boot 控制器接收上传的图片并存储到数据库，同时从数据库读取图片并传递给前端进行展示。

通过这个例子，你可以实现一个简单的图片上传与展示系统，进一步的优化可以加入图片压缩、格式转换、图片缓存等功能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

Java 实现数据库图片上传（包罗从数据库拿图片传递前端渲染） ...

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云