vue3 + Spingboot + oracle 通过Base64存储图片

news2024/11/15 11:48:32

一、前言

近期在做vue3+ Springboot + oracle 的工作，有个小功能通过页面导入图片保存到oracle数据库中，本人对前端不是很熟悉，借此记录一下实现方法；

二、前端部分代码

<template>
    <div class="dialog-mian">
      <el-form
        ref="formRef"
        :rules="rules"
        :model="crowdMessageTemplateDTO"
        label-width="auto"
      >
      <el-form-item
          label="视频图片"
          prop="videoImg"
          v-if="crowdMessageTemplateDTO.templateType === '2'"
        >
          <el-upload
            ref="upload"
            action="#"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            accept="*.*"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <gua-button
              type="default"
              layout="icon-text"
              text="导入"
              icon="document-import"
              title="导入"
              @click="importInfoUpload"
            />
          </el-upload>
       </el-form-item>
       <el-form-item
          label="视频地址"
          prop="videoAddress"
          v-if="crowdMessageTemplateDTO.templateType === '2'"
          >
          <el-input v-model="crowdMessageTemplateDTO.videoAddress" />
        </el-form-item>
    </el-form>
    <el-button
          type="primary"
          @click="save"
          >
          保存
    </el-button>
</template>

<script setup>

const formRef = ref(null)
const rules = reactive({})

let crowdMessageTemplateDTO = ref({
  videoAddress: '',
  videoImg: '',
})

const handleExceed = () => {
  ElMessage({
    message: '仅允许上传一个图片！',
    type: 'warning',
  })
}
const beforeUpload = (file) => {}
const importInfoUpload = async () => {}

const handleFileChange = (file, fileList) => {
  const fileData = file.raw
  if (fileData) {
    if (fileData.size > 2 * 1024 * 1024) {
      ElMessage({
        message: '文件大小不能超过2M',
        type: 'warning',
      })
      return
    }
    // 创建一个FileReader对象
    const reader = new FileReader()
    reader.onload = (e) => {
      // 当FileReader读取完成后，e.target.result就是文件的内容
      crowdMessageTemplateDTO.value.videoImg = e.target.result
    }
    // 读取图片
    reader.readAsDataURL(fileData)
  }
}

const save = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      const addDTO = reactive({ 
        videoAddress: crowdMessageTemplateDTO.value.videoAddress,
        videoImg: crowdMessageTemplateDTO.value.videoImg,    
      })
      const loadingInstance = ElLoading.service('正在保存数据...')
	  //post 方法
      Zc.addMessageTemplateTest(addDTO)
        .then((result) => {
          ElMessage({
            type: 'success',
            message: '保存成功',
          })
          back()
        })
        .catch((err) => {
          // ElMessage({
          //   type: 'error',
          //   message: err.stack,
          // })
        })
        .finally(() => {
          loadingInstance.close()
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

三、后端代码

1、bean

@Data
public class CrowdMessageTemplateVO implements Serializable {

   /**
	 * 视频地址
	 */
	@Schema(name = "videoAddress", description = "视频地址")
	private String videoAddress;

	/**
	 * 视频图片
	 */
	@Schema(name = "videoImg", description = "视频图片,Base64编码")
	private String videoImg;
}

2、controller

 @Operation(summary = "测试消息")
    @PostMapping("/zc/addMessageTemplateTest")
    public HttpResponse addMessageTemplateTest(@RequestBody CrowdMessageTemplateDTO crowdMessageTemplateDTO) {
	//TODO 后端处理及入库操作等
	}