springboot+vue 图文表单上传_springboot+vueshang'c有照片的表单-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39196997/article/details/105725813

本文介绍了使用SpringBoot后端和Vue前端实现图文表单上传的过程，包括前端如何获取图片的Base64格式，后端如何解析并转换为普通图片，以及如何将图片路径存入数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题场景

在这里插入图片描述

要把这个表单提交到后台，但是这里有图片上传操作，所以跟普通的form表单提交不一样。

实现思路

1、前端获取图片的base64格式
2、后台解析该格式转换成普通图片jpg等格式
3、将图片的路径赋值给实体类然后入库

第一步前端获取图片的base64格式

vue图片上传代码

    <el-form-item label="添加图片" ref="uploadElement" prop="image" >
          <el-input v-model="goods.image" v-if="false"></el-input>
          <el-upload
            class="upload-demo"
            :on-success="handleAvatarSuccess"
            accept="image/jpeg,image/jpg,image/png"
            action
            :file-list="fileList"
            :limit="1"
            :auto-upload="false"
            :before-upload="beforeUpload2"
            ref="upload"
            :on-change="handleChange"
            multiple
            :data="goods">
            <el-button type="success" size="small">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"
                   @click="submitUpdateProduct(goods)">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>

处理base64编码的代码
:on-change=“handleChange” 文件状态改变的钩子，添加文件，上传成功失败都会调用，所以可以在这个函数里面实现相关转换逻辑

      handleChange (file, fileList) {
   
      //注意这个file.raw,踩坑,你可以直接传file试试
        this.getBase64(file.raw).then(res => {
   
         //这个goods是我的商品信息，在data定义了
          this.goods.image =res
        });
      }