qidao123.com技术社区-IT企服评测·应用市场

标题: Java 实现数据库图片上传（包罗从数据库拿图片传递前端渲染） [打印本页]
作者: 瑞星    时间: 2025-5-9 14:04
标题: Java 实现数据库图片上传（包罗从数据库拿图片传递前端渲染）


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

首先，我们必要设计一个数据库表来存储图片。一样平常来说，图片的存储有两种方式：存储文件路径或者直接存储图片的二进制数据。为了本例的目标，我们选择直接存储图片的二进制数据。
SQL 建表语句：
  1. CREATE TABLE image (
  2.     id INT AUTO_INCREMENT PRIMARY KEY,
  3.     image_data LONGBLOB NOT NULL,  -- 存储图片的二进制数据
  4.     image_name VARCHAR(255) NOT NULL  -- 存储图片的名称
  5. );
复制代码
在这个表中：

二、前端页面设计

前端部分使用 HTML 和 JavaScript 实现一个简单的图片上传表单。我们还必要一个用于展示图片的 <img> 标签。
HTML 页面（upload.html）：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>图片上传</title>
  7. </head>
  8. <body>
  10. <h2>图片上传</h2>
  12. <!-- 图片上传表单 -->
  13. <form id="imageForm" enctype="multipart/form-data">
  14.     <label for="image">选择图片:</label>
  15.     <input type="file" id="image" name="image" accept="image/*" required><br><br>
  16.     <button type="submit">上传</button>
  17. </form>
  19. <hr>
  21. <h2>已上传图片</h2>
  22. <img id="uploadedImage" src="" alt="上传的图片将在这里显示" width="300" style="display: none;"/>
  24. <script>
  25.     // 上传图片
  26.     document.getElementById("imageForm").onsubmit = async function(event) {
  27.         event.preventDefault();
  28.         const formData = new FormData();
  29.         formData.append("image", document.getElementById("image").files[0]);
  31.         try {
  32.             const response = await fetch("/upload", {
  33.                 method: "POST",
  34.                 body: formData
  35.             });
  36.             if (response.ok) {
  37.                 const result = await response.json();
  38.                 // 更新前端展示图片
  39.                 const imgElement = document.getElementById("uploadedImage");
  40.                 imgElement.src = `/image/${result.imageId}`;
  41.                 imgElement.style.display = "block";
  42.             } else {
  43.                 alert("上传失败！");
  44.             }
  45.         } catch (error) {
  46.             console.error("上传失败", error);
  47.         }
  48.     };
  49. </script>
  51. </body>
  52. </html>
复制代码
说明：

三、后端代码实现

3.1 Spring Boot 后端设置

在后端，我们使用 Spring Boot 来处理图片上传和展示。
Maven 依赖（pom.xml）：
  1. <dependencies>
  2.     <!-- Spring Boot Starter Web -->
  3.     <dependency>
  4.         <groupId>org.springframework.boot</groupId>
  5.         <artifactId>spring-boot-starter-web</artifactId>
  6.     </dependency>
  7.     <!-- Spring Boot Starter Data JPA -->
  8.     <dependency>
  9.         <groupId>org.springframework.boot</groupId>
  10.         <artifactId>spring-boot-starter-data-jpa</artifactId>
  11.     </dependency>
  12.     <!-- MySQL Connector -->
  13.     <dependency>
  14.         <groupId>mysql</groupId>
  15.         <artifactId>mysql-connector-java</artifactId>
  16.     </dependency>
  17. </dependencies>
复制代码
3.2 实体类：Image

我们必要一个 Image 实体类来映射数据库表。
  1. import javax.persistence.Entity;
  2. import javax.persistence.Id;
  3. import javax.persistence.Lob;
  5. @Entity
  6. public class Image {
  8.     @Id
  9.     private Integer id;
  10.     private String imageName;
  12.     @Lob
  13.     private byte[] imageData;
  15.     // Getters and Setters
  16.     public Integer getId() {
  17.         return id;
  18.     }
  20.     public void setId(Integer id) {
  21.         this.id = id;
  22.     }
  24.     public String getImageName() {
  25.         return imageName;
  26.     }
  28.     public void setImageName(String imageName) {
  29.         this.imageName = imageName;
  30.     }
  32.     public byte[] getImageData() {
  33.         return imageData;
  34.     }
  36.     public void setImageData(byte[] imageData) {
  37.         this.imageData = imageData;
  38.     }
  39. }
复制代码
说明：

3.3 Repository 接口

我们必要一个 Repository 接口来操作 Image 实体。
  1. import org.springframework.data.jpa.repository.JpaRepository;
  3. public interface ImageRepository extends JpaRepository<Image, Integer> {
  4. }
复制代码
3.4 控制器：ImageController

接下来，我们必要创建一个控制器类来处理图片上传和展示的哀求。
  1. import org.springframework.beans.factory.annotation.Autowired;
  2. import org.springframework.http.ResponseEntity;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.*;
  5. import org.springframework.web.multipart.MultipartFile;
  7. import java.io.IOException;
  9. @Controller
  10. public class ImageController {
  12.     @Autowired
  13.     private ImageRepository imageRepository;
  15.     // 图片上传
  16.     @PostMapping("/upload")
  17.     @ResponseBody
  18.     public ResponseEntity<?> uploadImage(@RequestParam("image") MultipartFile image) throws IOException {
  19.         Image img = new Image();
  20.         img.setImageName(image.getOriginalFilename());
  21.         img.setImageData(image.getBytes());
  22.         img = imageRepository.save(img);
  23.         
  24.         return ResponseEntity.ok().body(new ImageResponse(img.getId()));
  25.     }
  27.     // 从数据库中读取图片并返回
  28.     @GetMapping("/image/{id}")
  29.     @ResponseBody
  30.     public ResponseEntity<byte[]> getImage(@PathVariable Integer id) {
  31.         Image image = imageRepository.findById(id).orElse(null);
  32.         if (image != null) {
  33.             return ResponseEntity.ok().body(image.getImageData());
  34.         } else {
  35.             return ResponseEntity.notFound().build();
  36.         }
  37.     }
  39.     // 用于上传后的返回对象
  40.     public static class ImageResponse {
  41.         private Integer imageId;
  43.         public ImageResponse(Integer imageId) {
  44.             this.imageId = imageId;
  45.         }
  47.         public Integer getImageId() {
  48.             return imageId;
  49.         }
  51.         public void setImageId(Integer imageId) {
  52.             this.imageId = imageId;
  53.         }
  54.     }
  55. }
复制代码
说明：
四、运行与测试

五、总结

通过本篇文章，我们学习了如何使用 Java（Spring Boot）实现一个图片上传的功能，包括：
通过这个例子，你可以实现一个简单的图片上传与展示系统，进一步的优化可以加入图片压缩、格式转换、图片缓存等功能。

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



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4