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

在当代的Web开发中，上传图片并将其存储在数据库中是常见的需求之一。本文将介绍怎样通过Java实现图片上传、存储到数据库、从数据库读取并传递到前端进行渲染的完整过程。
目录

• 项目结构
  
• 数据库表设计
  
• 实现图片上传功能
  
  
  
  • 3.1 文件上传控制器
    
  • 3.2 图片上传服务
    
  
  
• 实现图片读取和展示
  
• 前端渲染图片
  
• 完整代码展示
  
• 总结
  

---

1. 项目结构

在这次实现中，我们利用 Spring Boot 来处置惩罚背景逻辑，前端利用 HTML 进行渲染。项目标根本结构如下：

1. ├── src
2. │   ├── main
3. │   │   ├── java
4. │   │   │   └── com
5. │   │   │       └── example
6. │   │   │           └── imageupload
7. │   │   │               ├── controller
8. │   │   │               │   └── ImageController.java
9. │   │   │               ├── service
10. │   │   │               │   └── ImageService.java
11. │   │   │               ├── repository
12. │   │   │               │   └── ImageRepository.java
13. │   │   │               └── model
14. │   │   │                   └── ImageModel.java
15. │   └── resources
16. │       ├── templates
17. │       │   └── index.html
18. │       └── application.properties

复制代码

---

2. 数据库表设计

我们必要在数据库中存储图片的元数据信息以及图片的二进制数据，因此数据库表的设计如下：
数据库表结构（image_table）

1. CREATE TABLE image_table (
2.     id BIGINT PRIMARY KEY AUTO_INCREMENT,
3.     name VARCHAR(255) NOT NULL,
4.     type VARCHAR(50) NOT NULL,
5.     image_data LONGBLOB NOT NULL
6. );

复制代码

• id: 主键，唯一标识每张图片。
  
• name: 图片的名称。
  
• type: 图片的范例（如 image/jpeg, image/png 等）。
  
• image_data: 用于存储图片的二进制数据。
  

---

3. 实现图片上传功能

3.1 文件上传控制器

Spring Boot 中通过 @RestController 来实现上传文件的接口。在控制器中，我们处置惩罚上传的图片，并调用服务将图片存储到数据库。
ImageController.java

1. package com.example.imageupload.controller;
3. import com.example.imageupload.service.ImageService;
4. import org.springframework.beans.factory.annotation.Autowired;
5. import org.springframework.http.ResponseEntity;
6. import org.springframework.web.bind.annotation.*;
7. import org.springframework.web.multipart.MultipartFile;
9. @RestController
10. @RequestMapping("/api/images")
11. public class ImageController {
13.     @Autowired
14.     private ImageService imageService;
16.     @PostMapping("/upload")
17.     public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) {
18.         try {
19.             imageService.saveImage(file);
20.             return ResponseEntity.ok("Image uploaded successfully.");
21.         } catch (Exception e) {
22.             return ResponseEntity.status(500).body("Image upload failed: " + e.getMessage());
23.         }
24.     }
26.     @GetMapping("/{id}")
27.     public ResponseEntity<byte[]> getImage(@PathVariable Long id) {
28.         byte[] imageData = imageService.getImage(id);
29.         return ResponseEntity.ok(imageData);
30.     }
31. }

复制代码

3.2 图片上传服务

服务层负责处置惩罚文件存储的逻辑，包罗将文件元信息和二进制数据保存到数据库。
ImageService.java

1. package com.example.imageupload.service;
3. import com.example.imageupload.model.ImageModel;
4. import com.example.imageupload.repository.ImageRepository;
5. import org.springframework.beans.factory.annotation.Autowired;
6. import org.springframework.stereotype.Service;
7. import org.springframework.web.multipart.MultipartFile;
9. import java.io.IOException;
11. @Service
12. public class ImageService {
14.     @Autowired
15.     private ImageRepository imageRepository;
17.     public void saveImage(MultipartFile file) throws IOException {
18.         ImageModel image = new ImageModel();
19.         image.setName(file.getOriginalFilename());
20.         image.setType(file.getContentType());
21.         image.setImageData(file.getBytes());
23.         imageRepository.save(image);
24.     }
26.     public byte[] getImage(Long id) {
27.         ImageModel image = imageRepository.findById(id).orElseThrow(() -> new RuntimeException("Image not found."));
28.         return image.getImageData();
29.     }
30. }

复制代码

---

4. 实现图片读取和展示

ImageModel.java

这是用来映射数据库表的实体类，此中包罗图片的元数据信息和二进制数据。

1. package com.example.imageupload.model;
3. import javax.persistence.*;
5. @Entity
6. @Table(name = "image_table")
7. public class ImageModel {
9.     @Id
10.     @GeneratedValue(strategy = GenerationType.IDENTITY)
11.     private Long id;
13.     private String name;
14.     private String type;
16.     @Lob
17.     private byte[] imageData;
19.     // Getters and Setters
20. }

复制代码

ImageRepository.java

利用 Spring Data JPA 操纵数据库。

1. package com.example.imageupload.repository;
3. import com.example.imageupload.model.ImageModel;
4. import org.springframework.data.jpa.repository.JpaRepository;
5. import org.springframework.stereotype.Repository;
7. @Repository
8. public interface ImageRepository extends JpaRepository<ImageModel, Long> {
9. }

复制代码

---

5. 前端渲染图片

为了从后端获取图片并渲染在网页上，我们可以通过 HTML 和 JavaScript 实现。
index.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>Image Upload</title>
7. </head>
8. <body>
10. <h1>Upload Image</h1>
11. <form action="/api/images/upload" method="post" enctype="multipart/form-data">
12.     <input type="file" name="file" accept="image/*" required>
13.     <button type="submit">Upload</button>
14. </form>
16. <h2>Image Preview</h2>
17. <img id="preview" src="" alt="No image" width="300px">
19. <script>
20.     function fetchImage() {
21.         const imageId = 1;  // 替换为你需要的图片ID
22.         fetch(`/api/images/${imageId}`)
23.             .then(response => response.blob())
24.             .then(blob => {
25.                 const url = URL.createObjectURL(blob);
26.                 document.getElementById('preview').src = url;
27.             });
28.     }
30.     window.onload = fetchImage;
31. </script>
33. </body>
34. </html>

复制代码

这个页面提供了一个图片上传表单，用户可以上传图片到服务器。同时，通过 JS 调用 API 获取图片并在页面上进行渲染。

---

6. 完整代码展示

application.properties

1. spring.datasource.url=jdbc:mysql://localhost:3306/mydb
2. spring.datasource.username=root
3. spring.datasource.password=root
4. spring.jpa.hibernate.ddl-auto=update

复制代码

---

7. 总结

通过本文的详细步骤，您可以学习怎样利用 Java 实现图片的上传、存储到数据库，并通过 API 从数据库读取图片并在前端渲染表现。

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