-3

如何在 Java Spring boot 中将 MultipartFile 照片作为 Base64 字符串插入 DB，并将其从 db 显示在主屏幕上。

4

1 回答 1

1

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

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

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

@Data
public class Product implements Serializable{

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

解释 ：

产品图

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

上传文件

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

Base64Img

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

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 类中的字节变量。确保打印您要插入 DB 的内容，如果文件是 .png，则应如下所示：

iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAABOo35HAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAADZQTFRFAAAAQ0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/Q0A/////XhJvRwAAABB0Uk5TACBAYIAwEJ+/78+P31Bwr/Fi3TYAAAABYktHRBHitT26AAAACXBIWXMAAABIAAAASABGyWs+AAAHoElEQVR42u2d26KbIBBFuQmDoPj/X9uHnKgoGi+ gMd3rrW3OGVzCOAINjAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg2+FCCKmUUkoKIaq7mlFFzeDfZkkLZch2M2py6rrWcqEc1fNWWDJK6O8QJY3vVrGkmsLGeKNSN2uMN/JmYb​​qtu214IwsJ4x/v1tDT2/t8idDtonbZ81jl6n1tCOIeVdTtx+f0VTl/oAl0gy7ZHcS3WcYjb/3RFsjLZc3yqSejVCNeSKUcLXY9c/rmCrPYccgNzWiUMjSTai8fhJPsvXD5QqYfU/7U3ZU+/dBdbkX8DBC3yQofH3PJ59VxXQlVG561XIa7ZfmtD2Mug82ia6bKhq1FiX6nuZtkqT0/05iJL9/sDjtRZc2uX6GeI4sx1kxKM9r1ZOSTR0bYK/tZshjTKu4caveldjszwINlMcZk1EHqjWVqFdXqdCjhPVDWtPpXu7vV0Sr8kbImuj5nrihbHX9heais+MFmPzRfjB6j/sSlPlYWY8pufF8bvYfa9lTE58pifFRImOWPjd4Dw7mX8CfLYqwZOpdZqAT04Mo2J8M9W9Y4c9dJW7o+WMH+oCzG3KqtkSt3PtbjZTHZD8V6/o+9K5tjyu75slhlF7N8n69slunoH5DFeL1gq3dV51ka+gVZo8wkk/VVnWkJ6ydkjWyNhluV29WPyBps+V6M9rld/Yosxt9ZPrz/5l3e23xL2b8ia3gm/pXpTdbn4I​​/J6tO51Ywxpm2BJd​​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

4-将图像插入数据库

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

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

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

1-控制器端：

字符串编码64 = new String(product.getProductImg()); product.setBase64Img(encoded64);

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

下一个是什么？

2-百里香叶面

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

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

*{Base64Img} 与 ${product.Base64Img} 相同，在表单中，所以...

于 2021-09-07T13:06:34.667 回答