Java實現(xiàn)數(shù)據(jù)庫圖片上傳功能詳解

更新時間：2025年03月14日 10:18:40 作者：Blue的成長日記

這篇文章主要為大家詳細(xì)介紹了如何使用Java實現(xiàn)數(shù)據(jù)庫圖片上傳功能,包含從數(shù)據(jù)庫拿圖片傳遞前端渲染,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1、前言

我們使用數(shù)據(jù)庫經(jīng)常傳遞字符串、數(shù)字，但是很少在數(shù)據(jù)庫存儲圖片、Word文件，我也去網(wǎng)上找了找其他人的文章，只能說這類型的少的可憐，不是收費，就是講的亂七八糟。既然如此，那么我將為需要這方面知識點的朋友寫下這篇文章。本篇文章我們從以下幾個方面：

1、數(shù)據(jù)庫搭建

2、后端實現(xiàn)，將圖片存儲進(jìn)數(shù)據(jù)庫

3、后端實現(xiàn)，從數(shù)據(jù)庫取出圖片給前端

4、前端拿到后端傳遞的json信息渲染到網(wǎng)頁

廢話不多說，直接開始！

2、數(shù)據(jù)庫搭建

本次數(shù)據(jù)庫我們選擇比較經(jīng)典的Mysql(只是因為我只會這個)，mysql提供一個字段類型叫做

blob，對于這個字段類型，我就不過多詳細(xì)敘述，csdn博客上有，各位可以去看看。

建表語句：

create table test2(
    id int auto_increment primary key ,
    name varchar(100) comment '名稱',
    photo blob comment '照片'
)

3、后端實現(xiàn)將圖片存儲進(jìn)數(shù)據(jù)庫

思想：

實際上我們可以通過字節(jié)流的形式，將圖片轉(zhuǎn)成二進(jìn)制，然后將其保存在數(shù)據(jù)庫里面。我們按照以下步驟：

1、找到圖片位置

2、圖片轉(zhuǎn)為Fileinputstream流

3、存儲數(shù)據(jù)庫

找到圖片位置（如下圖操作）

圖片轉(zhuǎn)為Fileinputstream流的工具類（可直接copy）

package com.example.jishedemo2.img;
 
import java.io.*;
 
public class imgeuntil {
    /**
     * @author Administrator
     *
     */
 
 
        // 讀取本地圖片獲取輸入流
        public static FileInputStream readImage(String path) throws IOException {
            return new FileInputStream(new File(path));
        }
 
        // 讀取表中圖片獲取輸出流
        public static void readBin2Image(InputStream in, String targetPath) {
            File file = new File(targetPath);
            String path = targetPath.substring(0, targetPath.lastIndexOf("/"));
            if (!file.exists()) {
                new File(path).mkdir();
            }
            FileOutputStream fos = null;
            try {
                fos = new FileOutputStream(file);
                int len = 0;
                byte[] buf = new byte[1024];
                while ((len = in.read(buf)) != -1) {
                    fos.write(buf, 0, len);
                }
                fos.flush();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if (null != fos) {
                    try {
                        fos.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }

存儲數(shù)據(jù)庫

mapper層：

package com.example.jishedemo2.img;
 
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
 
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
 
@Mapper
public interface imagemapper {
 
 @Insert("insert into test2 values(null,#{name},#{photo})")
 void inser(String name,  FileInputStream photo);
 
}

service層：

package com.example.jishedemo2.img;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.io.FileInputStream;
import java.util.List;
 
@Service
public class imageservice implements imge{
 
    @Autowired
    private imagemapper imagemapper;
 
    @Override
    public void inser(String name, FileInputStream file) {
        imagemapper.inser(name,file);
    }
 
}

control層：

package com.example.jishedemo2.img;
 
import com.example.jishedemo2.dao.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.io.FileInputStream;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.util.List;
 
@RestController
public class imgedemo {
    @Autowired
    private imageservice imageservice;
 
    // 將圖片插入數(shù)據(jù)庫
    @PostMapping("test3")
    public  void readImage2DB() throws IOException {
        String path = "D:\\wsstext.png";
        try {
            FileInputStream in = null;
            in = imgeuntil.readImage(path);
            imageservice.inser("測試",in);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
 
   
}

沒什么好說的，如果你不會javaweb，這邊建議先去把javaweb學(xué)了。

4、后端實現(xiàn)從數(shù)據(jù)庫取出圖片給前端

（可直接看這個，這個給的是所有代碼）

這一步,多了一點，我們需要寫一個類與數(shù)據(jù)庫的表字段統(tǒng)一（dao層）

dao層：

package com.example.jishedemo2.img;
 
import java.io.FileInputStream;
import java.io.InputStream;
 
public class photo {
    int id;
    String name;
    byte[] photo;
 
    public photo() {
    }
 
    public photo(int id, String name, byte[] photo) {
        this.id = id;
        this.name = name;
        this.photo = photo;
    }
 
    /**
     * 獲取
     * @return id
     */
    public int getId() {
        return id;
    }
 
    /**
     * 設(shè)置
     * @param id
     */
    public void setId(int id) {
        this.id = id;
    }
 
    /**
     * 獲取
     * @return name
     */
    public String getName() {
        return name;
    }
 
    /**
     * 設(shè)置
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }
 
    /**
     * 獲取
     * @return photo
     */
    public byte[] getPhoto() {
        return photo;
    }
 
    /**
     * 設(shè)置
     * @param photo
     */
    public void setPhoto(byte[] photo) {
        this.photo = photo;
    }
 
    public String toString() {
        return "photo{id = " + id + ", name = " + name + ", photo = " + photo + "}";
    }
}

mapper層：

package com.example.jishedemo2.img;
 
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
 
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
 
@Mapper
public interface imagemapper {
 
 @Insert("insert into test2 values(null,#{name},#{photo})")
 void inser(String name,  FileInputStream photo);
 
 @Select("select * from test2")
 List<photo> select();
 
 
}

service層：

package com.example.jishedemo2.img;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.io.FileInputStream;
import java.util.List;
 
@Service
public class imageservice implements imge{
 
    @Autowired
    private imagemapper imagemapper;
 
    @Override
    public void inser(String name, FileInputStream file) {
        imagemapper.inser(name,file);
    }
 
    @Override
    public List<photo> select() {
        return imagemapper.select();
    }
}

control層：

package com.example.jishedemo2.img;
 
import com.example.jishedemo2.dao.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.io.FileInputStream;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.util.List;
 
@RestController
public class imgedemo {
    @Autowired
    private imageservice imageservice;
 
    // 將圖片插入數(shù)據(jù)庫
    @PostMapping("test3")
    public  void readImage2DB() throws IOException {
        String path = "D:\\wsstext.png";
        PreparedStatement ps = null;
        try {
            FileInputStream in = null;
            in = imgeuntil.readImage(path);
            imageservice.inser("測試",in);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
 
    //傳數(shù)據(jù)
    @PostMapping("test4")
    public Result select(){
 
        List<photo> photos = imageservice.select();
 
        return Result.success(photos);
    }
 
 
}

前端拿到效果：

5、前端拿到后端傳遞的json信息渲染到網(wǎng)頁

對于新手前端拿到photo，可能會很蒙蔽不知道這個是什么，我這里簡要說一下：

解釋：

這段文本是一個HTML (HyperText Markup Language) 編碼的字符串，它嵌入了一個Base64編碼的圖像數(shù)據(jù)（以data:image/png;base64,開頭的部分，但在這個示例中被截斷了），并包含了一些CSS (Cascading Style Sheets) 樣式和JavaScript（雖然直接看起來并不包含JavaScript代碼，但可能是在某處被引用或嵌入的）。

具體來說，這個字符串包含以下幾個部分：

Base64編碼的圖像數(shù)據(jù)：這部分以data:image/png;base64,開頭，后跟一長串字符，這些字符是圖像的二進(jìn)制數(shù)據(jù)經(jīng)過Base64編碼后的結(jié)果。

CSS樣式：字符串中包含了一些CSS樣式，如i標(biāo)簽的樣式定義（i { ... }），這些樣式可能用于控制HTML文檔中元素的顯示方式。但在這個示例中，CSS樣式是直接嵌入在HTML中的，并且由于格式和上下文的原因，可能不完整或難以直接應(yīng)用。

HTML結(jié)構(gòu)：字符串中包含了HTML的基本結(jié)構(gòu)，如<div>、<span>等標(biāo)簽，以及自定義的類或ID屬性（如class="...", id="..."），這些用于在CSS中引用并應(yīng)用樣式。

JavaScript的引用或嵌入：雖然直接在這個字符串中沒有看到JavaScript代碼，但通常HTML頁面會包含JavaScript代碼或引用外部JavaScript文件來控制頁面的行為。這個字符串可能只是HTML頁面的一部分，而JavaScript代碼可能位于其他位置。

特殊字符和注釋：字符串中還包含了一些特殊字符（如//開頭的注釋）和格式化字符（如換行符\n），這些在HTML和CSS中用于提高代碼的可讀性和可維護(hù)性。

綜上所述，這段文本是一個HTML編碼的字符串，它結(jié)合了Base64編碼的圖像數(shù)據(jù)、CSS樣式和HTML結(jié)構(gòu)，可能還隱式地引用了JavaScript代碼。這種格式常用于在網(wǎng)頁中嵌入圖像、樣式和腳本，以實現(xiàn)豐富的視覺效果和交互功能。

如何實現(xiàn)渲染在網(wǎng)頁：

在前端網(wǎng)頁中嵌入使用Base64編碼的圖像字符串，可以直接將這個字符串作為<img>標(biāo)簽的src屬性的值。由于Base64編碼的圖像數(shù)據(jù)被封裝在data: URL中，瀏覽器可以直接解析這個URL并將其作為圖像內(nèi)容顯示在頁面上，而無需從外部服務(wù)器加載圖像。

以下是一個該字符串在前端網(wǎng)頁中嵌入圖像的示例：

<template>
   <div>  
    <img v-if="imageUrl" :src="imageUrl" alt="Image from backend" />  
  </div>  
</template>
 
<script>
import axios from 'axios'
export default {
  data() {
    return {
      imageUrl: null
    }
  },
  mounted(){
    
    axios.post("http://localhost:8080/test4").then((e) => {
      this.imageUrl= "data:image/png;base64," + e.data.data[0].photo;
    })
  
}

以上就是Java實現(xiàn)數(shù)據(jù)庫圖片上傳功能詳解的詳細(xì)內(nèi)容，更多關(guān)于Java數(shù)據(jù)庫圖片上傳的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: