SpringBoot3+Vue3+Mysql+Element Plus完成数据库存储blob类型图片，前端渲染后端传来的base64类型图片

最新推荐文章于 2025-04-13 21:25:50 发布

原创

最新推荐文章于 2025-04-13 21:25:50 发布 · 2k 阅读

前言

如果你的前后端分离项目采用SpringBoot3+Vue3+Element Plus，且在没有OSS（对象存储）的情况下，使用mysql读写图片（可能不限于图片，待测试）。

耗时三天，在踩了无数雷后，终于完成本功能。为你呈上。

本文完成功能：

前端采用Element发起上传图片请求，后端接收并将其存储到mysql。
后端相应图片base64数据，前端接收并渲染到页面。

1.前端上传到数据库

1.1前端上传图片

<el-form-item label="宠物照片" prop="pictureId">
<el-upload v-model="form.pictureId" :auto-upload="false" :action="''" 
           :show-file-list="true" :on-change="handleAvatarChangeIcon">
  <el-button type="primary">选取文件</el-button>
</el-upload>
</el-form-item>

参数：

:auto-upload 是否自动上传

:action 自动上传的请求路径

:show-file-list 显示已上传的图片列表

:on-change 选中文件触发的change事件

自动上传与否都不影响，这里主要是判断一下图片的大小、后缀名。如下：

const handleAvatarChangeIcon = (file) => {
   
   
  // 限制文件后缀名
  const isJPG = file.raw.type === 'image/jpeg'
  const isPNG = file.raw.type === 'image/png'
  // 限制上传文件的大小
  const isLt5M = file.raw.size / 1024 / 1024 < 5
  if (!isPNG && !isJPG) {
   
   
    ElMessage.error('图片只能是 JPG/PNG 格式')
    return false
  } else if (!isLt5M) {
   
   
    ElMessage.error('图片应在5MB以内')
    return false
  } else {
   
   
    // 发起请求
    let param = new FormData();
    // 文件为form data格式
    param.append("file", file.raw);
    post('/api/file/upload', param, (res