base64存储图片

在数据库中，将图片路径修改为longtext类型

以下为vue代码

 <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  :on-change='handleAvatarChange'
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if='imageBase64' :src='imageBase64' class='avatar' />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>


// Base64 图片数据
const imageBase64 = ref('')
// 图片上传前的校验
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('封面图片必须是 JPG 或 PNG 格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('封面图片大小不能超过 2MB!')
    return false
  }
  return true
}
// 处理图片选择
const handleAvatarChange = (file: UploadFile) => {
  if (file.raw) {
    const reader = new FileReader()
    reader.onload = (e) => {
      if (e.target?.result) {
        imageBase64.value = e.target.result as string // 将图片转换为 Base64
      }
    }
    reader.readAsDataURL(file.raw) // 读取文件为 Base64
  }
}