快捷導(dǎo)航

Java實(shí)現(xiàn)數(shù)據(jù)庫圖片上傳與存儲(chǔ)功能

更新時(shí)間：2025年03月18日 09:25:13 作者：一只蝸牛兒

在現(xiàn)代的Web開發(fā)中,上傳圖片并將其存儲(chǔ)在數(shù)據(jù)庫中是常見的需求之一,本文將介紹如何通過Java實(shí)現(xiàn)圖片上傳,存儲(chǔ)到數(shù)據(jù)庫的完整過程,希望對(duì)大家有所幫助

在現(xiàn)代的Web開發(fā)中，上傳圖片并將其存儲(chǔ)在數(shù)據(jù)庫中是常見的需求之一。本文將介紹如何通過Java實(shí)現(xiàn)圖片上傳、存儲(chǔ)到數(shù)據(jù)庫、從數(shù)據(jù)庫讀取并傳遞到前端進(jìn)行渲染的完整過程。

1. 項(xiàng)目結(jié)構(gòu)

在這次實(shí)現(xiàn)中，我們使用 Spring Boot 來處理后臺(tái)邏輯，前端使用 HTML 進(jìn)行渲染。項(xiàng)目的基本結(jié)構(gòu)如下：

├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── imageupload
│ │ │ ├── controller
│ │ │ │ └── ImageController.java
│ │ │ ├── service
│ │ │ │ └── ImageService.java
│ │ │ ├── repository
│ │ │ │ └── ImageRepository.java
│ │ │ └── model
│ │ │ └── ImageModel.java
│ └── resources
│ ├── templates
│ │ └── index.html
│ └── application.properties

2. 數(shù)據(jù)庫表設(shè)計(jì)

我們需要在數(shù)據(jù)庫中存儲(chǔ)圖片的元數(shù)據(jù)信息以及圖片的二進(jìn)制數(shù)據(jù)，因此數(shù)據(jù)庫表的設(shè)計(jì)如下：

數(shù)據(jù)庫表結(jié)構(gòu)（image_table）

CREATE TABLE image_table (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    type VARCHAR(50) NOT NULL,
    image_data LONGBLOB NOT NULL
);

id: 主鍵，唯一標(biāo)識(shí)每張圖片。

name: 圖片的名稱。

type: 圖片的類型（如 image/jpeg, image/png 等）。

image_data: 用于存儲(chǔ)圖片的二進(jìn)制數(shù)據(jù)。

3. 實(shí)現(xiàn)圖片上傳功能

3.1 文件上傳控制器

Spring Boot 中通過 @RestController 來實(shí)現(xiàn)上傳文件的接口。在控制器中，我們處理上傳的圖片，并調(diào)用服務(wù)將圖片存儲(chǔ)到數(shù)據(jù)庫。

ImageController.java

package com.example.imageupload.controller;

import com.example.imageupload.service.ImageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/api/images")
public class ImageController {

    @Autowired
    private ImageService imageService;

    @PostMapping("/upload")
    public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file) {
        try {
            imageService.saveImage(file);
            return ResponseEntity.ok("Image uploaded successfully.");
        } catch (Exception e) {
            return ResponseEntity.status(500).body("Image upload failed: " + e.getMessage());
        }
    }

    @GetMapping("/{id}")
    public ResponseEntity<byte[]> getImage(@PathVariable Long id) {
        byte[] imageData = imageService.getImage(id);
        return ResponseEntity.ok(imageData);
    }
}

3.2 圖片上傳服務(wù)

服務(wù)層負(fù)責(zé)處理文件存儲(chǔ)的邏輯，包括將文件元信息和二進(jìn)制數(shù)據(jù)保存到數(shù)據(jù)庫。

ImageService.java

package com.example.imageupload.service;

import com.example.imageupload.model.ImageModel;
import com.example.imageupload.repository.ImageRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@Service
public class ImageService {

    @Autowired
    private ImageRepository imageRepository;

    public void saveImage(MultipartFile file) throws IOException {
        ImageModel image = new ImageModel();
        image.setName(file.getOriginalFilename());
        image.setType(file.getContentType());
        image.setImageData(file.getBytes());

        imageRepository.save(image);
    }

    public byte[] getImage(Long id) {
        ImageModel image = imageRepository.findById(id).orElseThrow(() -> new RuntimeException("Image not found."));
        return image.getImageData();
    }
}

4. 實(shí)現(xiàn)圖片讀取和展示

ImageModel.java

這是用來映射數(shù)據(jù)庫表的實(shí)體類，其中包括圖片的元數(shù)據(jù)信息和二進(jìn)制數(shù)據(jù)。

package com.example.imageupload.model;

import javax.persistence.*;

@Entity
@Table(name = "image_table")
public class ImageModel {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    private String type;

    @Lob
    private byte[] imageData;

    // Getters and Setters
}

ImageRepository.java

使用 Spring Data JPA 操作數(shù)據(jù)庫。

package com.example.imageupload.repository;

import com.example.imageupload.model.ImageModel;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ImageRepository extends JpaRepository<ImageModel, Long> {
}

5. 前端渲染圖片

為了從后端獲取圖片并渲染在網(wǎng)頁上，我們可以通過 HTML 和 JavaScript 實(shí)現(xiàn)。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload</title>
</head>
<body>

<h1>Upload Image</h1>
<form action="/api/images/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" accept="image/*" required>
    <button type="submit">Upload</button>
</form>

<h2>Image Preview</h2>
<img id="preview" src="" alt="No image" width="300px">

<script>
    function fetchImage() {
        const imageId = 1;  // 替換為你需要的圖片ID
        fetch(`/api/images/${imageId}`)
            .then(response => response.blob())
            .then(blob => {
                const url = URL.createObjectURL(blob);
                document.getElementById('preview').src = url;
            });
    }

    window.onload = fetchImage;
</script>

</body>
</html>

這個(gè)頁面提供了一個(gè)圖片上傳表單，用戶可以上傳圖片到服務(wù)器。同時(shí)，通過 JS 調(diào)用 API 獲取圖片并在頁面上進(jìn)行渲染。

6. 完整代碼展示

application.properties

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