如何在 Java Spring 引导中将 MultipartFile 照片作为 Base64 字符串插入数据库并在从数据库返回的主屏幕上显示

Question

如何在 Java 中将 MultipartFile 照片作为 Base64 字符串插入数据库 Spring 引导并在从数据库返回的主屏幕上显示它。

Answer 1

如何使用 thymeleaf 和 spring boot

将图像保存到 mySQL 数据库

要将图像保存到 mySQL 数据库，您需要执行以下操作：

1 - 在 bean class 上，您应该像这样声明 3 个变量：

@Data
public class Product implements Serializable{

    private byte[] ProductImg;
    
    private MultipartFile UploadFile;
    
    private String Base64Img;

解释：

ProductImg

以字节为单位，这是将存储我们的图像以将其保存到数据库的变量。

UploadFile

是您要上传的文件，在我们的案例中是图片。

Base64Img

是我们转换后的编码图像。别着急，稍后我会详细解释。

2- 让我们去获取图像：

首先你必须从 HTML 文件中请求像这样的 thymeleaf 图像：

<input type="file" name="image" accept="image/png, image/jpeg"/>

或任何你喜欢的。

3-让我们在控制器端做功课：

import org.apache.tomcat.util.codec.binary.Base64;

@RequestMapping(value="/product-registration", method = RequestMethod.POST)
public String insertProductInfo(@ModelAttribute Product productInfo, @RequestParam(value="image",required=false) MultipartFile file,Model model) {
    productInfo.setUploadFile(file);
    try{
        byte[] image = Base64.encodeBase64(productInfo.getUploadFile().getBytes());
        String result = new String(image);
        System.out.println(result);
        productInfo.setProductImg(image);
    } catch(Exception e) {
        e.printStackTrace();
    }

    productService.insert(productInfo);
    return "redirect:/product-list";
}

那么这段代码的作用是：

@ModelAttribute Product productInfo productInfo is the model attribute I'm collecting other data with, image is not included, you can include it though.

@RequestParam(value="image",required=false) MultipartFile file Here I'm getting the image I just uploaded and assigned it to "file" name.

其余代码将其转换为字节，然后在将其转换为字符串后将字节值分配给 Product class 中的字节变量。确保打印您要插入到数据库中的内容，如果文件是 .png，它应该如下所示：

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

4-插入图片到数据库

我认为这一步没什么大不了的，就像插入任何其他数据一样调用服务 class 并将产品 class 变量分配给它，然后将其插入到数据库中。

如何从数据库中拉出照片并显示在屏幕上：

这部分有点棘手，请注意

1-控制器端：

String encoded64 = new String(product.getProductImg()); product.setBase64Img(encoded64);

你会得到编码后的图像，然后将其赋值给我们在 Product class 中声明的 String Base64Img，记得吗？到现在为止，你还好。如果您尝试打印 encoded64，它会给出我上面写的相同的奇怪字符。

那么下一步是什么？

2-百里香叶面

在屏幕上显示图像的代码如下：

<img th:src="|data:image;base64,*{Base64Img}|" class="product-image">

*{Base64Img} is the same as ${product.Base64Img} It's inside a form, so ...

如何在 Java Spring 引导中将 MultipartFile 照片作为 Base64 字符串插入数据库并在从数据库返回的主屏幕上显示

How to insert MultipartFile photo into DB as Base64 String in Java Spring boot and display it on the main screen back from the db

base64

mybatis

thymeleaf

spring-boot

multipartfile