如何在Java Spring启动中将MultipartFile照片作为Base64字符串插入数据库并将其从数据库显示在主屏幕上

Question

如何在 Java Spring 启动中将 MultipartFile 照片作为 Base64 字符串插入数据库，并将其从数据库显示在主屏幕上。

Answer 1

如何使用 thymeleaf 和 spring boot 将图像保存到 mySQL 数据库

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

1 - 在 bean 类上，您应该声明 3 个变量，如下所示：

@Data
public class Product implements Serializable{

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

解释 ：

产品图片

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

上传文件

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

Base64图像

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

2- 让我们去获取图像：

首先，您必须使用 thymeleaf 从 HTML 文件请求图像，如下所示：

<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 是我正在收集其他数据的模型属性，不包括图像，但您可以包括它。

@RequestParam(value="image",required=false) MultipartFile 文件在这里，我获取了刚刚上传的图像并将其分配给“文件”名称。

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

iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAADZQTFRFAAAAQ0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A /Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/////XhJvRwAAABB0Uk5TACBAYIAwEJ+/78+P31Bwr/Fi3TYAAAABYktHRBHitT26AAAACXBIWXMAAABIAAAASABGyWs+AAAHoElEQVR42u2d26KbIBBFuQmDoPj /X9uHnKgoGi+ gMd3rrW3OGVzCOAINjAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg2+FCCKmUUkoKIaq7mlFFzeDfZkkLZch2M2py6rrWcqEc1fNWWDJK6O8QJY3vVrGkmsLGeKNSN2uMN/JmYb​​qtu214IwsJ4x/v1tDT2/t8idD tonbZ81jl6n1tCOIeVdTtx+f0VTl/oAl0gy7ZHcS3WcYjb/3RFsjLZc3yqSejVCNeSKUcLXY9c/rmCrPYccgNzWiUMjSTai8fhJPsvXD5QqYfU/7U3ZU+/dBdbkX8DBC3yQofH3PJ59VxXQlVG561X Ia7ZfmtD2Mug82ia6bKhq1FiX6nuZtkqT0/05iJL9/sDjtRZc2uX6GeI4sx1kxKM9r1ZOSTR0bYK/tZshjTKu4caveldjszwINlMcZk1EHqjWVqFdXqdCjhPVDWtPpXu7vV0Sr8kbImuj 5nrihbHX9heais+MFmPzRfjB6j/sSLPlyWY8pufF8bvYfa9LTE58pifFRImOWPjd4Dw7mX8CfLYqwZOpdZqAT04Mo2J8M9W9Y4c9dJW7o+WMH+oCzG3KqtkSt3PtbjZTHZD8V6/o+9K5tj yu75slhlF7N8n69slunoH5DFeL1gq3dV51ka+gVZo8wkk/VVnWkJ6ydkjWyNhluV29WPyBps+V6M9rld/Yosxt9ZPrz/5l3e23xL2b8ia3gm/ pXpTdbn4I​​/J6tO51Ywxpm2BJd​​HfkdUXCmb2h2fLes8XZJXVJ3kxrEvWuoCscOUOt2H7TFZZfa1AjNG8ksgn68LNNOMZ4byy+pdqIfK9PCdlXbSZhoeDC1mbBqJ97+4Y5/oisi4YjHqyeyWzrOlGp tybg9RkN0/RjYDtdL9CblksWoH1rKyskzP668lqviUxuyxZdNeZmm/dLJO6tEtsisoua9y1sneshKyucwXGYrR/xUpRSlY7RGlLyRJynE68KNmtrNKsmCw9xNHFZDE9XrPM3LmitRlOF3rdiScbhumHIq87 0e2vqzKJ5G89qpwsWXBTcfRuON4/kTE9ivkyZzlZutwonL5Ij5Z4Rf6bPVRx5WS9XwuJFZc1qrFF7p413uvyG7KG/TnZZQn2e7JS1wZZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZ kAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkAVZkPWdsoQQQgh+pyz+asPXyuJCOZqciV1TUO1+bUdlcdGqQJNvFidyamjCF8gSimy3 AjlZlZVVSUdrLbCkxBfI4m3otmBDW5WRVbXBbmpCkPxeWb7bgTWNzitLN8buaYG/VdZuQpNPVhMONuIpsrrOmiqHrGpfn/pCWTWRUy+IlrN+Lc/KkvVyLif6a4Ijqr9SFjkpdOpp7pLOrNLHZcX HBAyWXKpO0WL+pLxTVq3WQ/HG1Tt0fZCVUlW7Zr2cE6q+URYbhtSmL7nXjfMbda3KmqvyrtnWgrZOfS3/JbJeJYvZU21WU1/ps6HXZEk7NbWrAWb+jnaJLCaJzO5XmcrZj2celcuanJJk3e5 zOrgjkux6WUeR9OGMoCVZk1OSSH7ftRX4hVV0OtvsjKAFWdEpSfvG/5NlMcYjXW6LrKhbGf6915b9F050xYe1p2TxuoyqZ8iKD+ Acn7uSkiVssSMvnyErrgPkmiz5qdr4D2QxPZo2MMuyRiM2ZD/m6TGyogOozJIsMz986/+UxfSQuUinZCU+8IuyRM/qx4aa4O+A7UiWrpcqjOnkwrZo3yWrEkolprIskVKiWs/zNJdF65m9Esrti/Y LSRQof40SVkHNZv3qmyUt8ay+nxlq0Q0fyTa/bK4NDvWLryRUV05HMxpYlkmfbTluWj3yppPVW25BDd6tA2ZSY5lyUk2yxTtNllahsMLBzb0E4eDrWqQVc1cZYp2j6zGdOew5u+O63d3se9agfTbi 9fvaPZkONPcJYuvjQciMn+LLMoQ0doI4VGWf3+2/5lXbs8b7WJZTbpFnpb2glSiVZS+4CAYGwbdlIoxJsJytGSFwJejUXOxLJlohw+t+Fhja6FSacfLybH30St2Kpr9XBUwpkWbqi+8vE6WVj6RPXd MMvFEnvatTiZAo9sS0fqVpcKyEotRB+Z4xXxprE2UtHU7j3bgwqrEQtwFsqZD4pCppSvYUC/li/YajAVlTRejzMkgYlftcT7afCGumCwepmkmwxxNu7F7FYkWeClZ8X3JNxfe0GdVlG3eT1A8NgrJKqNqfgF 3RCsoi7JPmq7puiJaMVlUYn55Udc10QrJ8pIVQn4otktGKyNLaVYMraauLotWQhZxVpQqGh1UlY3GqaAs27LiDK83l0bLuOnlmm4V3+5ro2UMJkv9d7l0tEBE7VXR1GSrRYYb0Lac/Si/fG0AAAAAAAAAAAAAAA啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊/gHzOz /zZvHz10AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMTAtMDNUMjM6MTg6NDYrMDk6MDBUXKpbAAAAJXRFWHRkyXRlOm1vZGlmeQAyMDIwLTEwLTAzVDIzOjE4OjQ2KzA5OjAwJQES5wAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=

4-将图像插入数据库

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

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

这部分有点棘手，所以请注意

1- 控制器侧：

字符串编码64 =新字符串(product.getProductImg()); 产品.setBase64Img(encoded64);

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

下一个是什么？

2-百里香叶面

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

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

*{Base64Img} 与 ${product.Base64Img} 相同，它位于表单内，所以...