SpringBoot+elementUI图片跟随表单一起上传

图片跟随表单一起上传

前端如果直接读图片的二进制数据在数据传输时会报错，所以先读取图片的字符串数据存到额外参数再传到后台进行转换可以比较简单的实现。

vue前端用elementUI上传组件**auto-upload=“false”**关闭自动上传

<el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-change='changeUpload' :auto-upload="false" :before-upload="beforeAvatarUpload">
              <img v-if="depart.imageUrl" :src="depart.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon">i>
el-upload>

实体添加额外参数用于存放图片字符串

	@Transient
    @JsonInclude(JsonInclude.Include.NON_DEFAULT)
    private String imageUrl;

后台直接用实体get然后转成byte存进类型为blob的字段

		String image = ConvertUtil.getString(entity.getImageUrl());
        entity.setDepartImg(base64ToByte(entity.getImageUrl()));
        

base64转byte函数

public byte[] base64ToByte(String image){
        String header = "data:image/jpeg;base64,";
        if (null != image && image.indexOf(header) == 0) {
            image = image.substring(header.length());
            byte[] decodedByte = Base64.decode(image.getBytes());
            return decodedByte;
        }
        return null;
    }