基于vue+springboot，实现图片base64转码保存到数据库

背景：在项目中遇到一个新增、编辑的场景。新增一个车辆信息，并且附有车辆照片和关联的设备照片，照片转码成base64保存到mysql数据库。前端使用的是elementUi的upload组件，在前端把图片转成base64再传到后端。

前端代码如下：

<el-upload
              ref="carUpload"
              :action="doUpload"
              :file-list="carPictureList"
              list-type="picture-card"
              :limit=limitNum
              :auto-upload="true"
              :on-change="changeCarPicture"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
  • ref ：给这个组件加个id，可通过 this.$refs.carUpload 访问这个组件对象
  • action ：必选参数，上传的地址，通过这个地址上传的文件类型为MultipartFile，而我需要的是base64的一串字符串。所以我这里的处理方式是随意给个接口地址，下面会给出接口代码
  • file-list ：上传的文件列表，一个对象数组，类似[{name:‘xxx’,url:‘xxxx’}]
  • list-type ：文件列表的类型，有text/picture/picture-card，可根据需求选择对应的类型
  • limit ：最大允许上传个数
  • auto-upload ：是否在选取文件后立即进行上传，这个是会上传到你action的指定接口的
  • on-change ：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，在这里可以把图片转成base64
  • on-exceed ：文件超出个数限制时的钩子
  • before-upload ：上传文件之前的钩子，参数为上传的文件，我是在这加了文件类型的限制

直接上代码：

data(){
		return{
			doUpload: this.$http.adornUrl('/sys/dept/upload'),
			carPictureList:[],
			limitNum: 1,
			carPicture:'' //定义一个值来接收base64的字符串 
		}
	},
	methods:{
		changeCarPicture(file, fileList) {
       	   // 图片转成base64上传
        	let reader = new FileReader();
        	reader.onload = () => {
          	 	let _base64 = reader.result;
          		let BASE64 = _base64.split(",");
         		this.carPicture = BASE64[1];  //赋值
       	    };
          reader.readAsDataURL(file.raw);
        },
        handleExceed(files, fileList) {
        	//这个是文件超出个数限制时，给出提示
        	this.$notify.warning({
          	  title: '警告',
          	  message: '图片只能上传一张'
       		})
      	},
      	beforeUpload(file){
      		//添加文件类型的限制
       	 	let types = ['image/jpeg', 'image/jpg', 'image/png'];
        	const isImage = types.includes(file.type);
        	if (!isImage) {
          		this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
          		return false;
        	}
     	},
	}

给大家看一下action绑定的doUpload: this.$http.adornUrl(’/sys/dept/upload’),这个接口

/**
     * 上传文件
     */
    @PostMapping("/upload")
    public R upload(@RequestParam("file") MultipartFile file) throws Exception {
        //上传文件
        String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        byte[] data = file.getBytes();

        return R.ok().put("data", data);
    }

保证这个接口能用就行。

剩下的就很简单了，图片已经转成base64字符串保存在carPicture了，把这个字符串传到后台进行保存就行了。要传其他照片也是一样，多写一个upload，转成base64，换一个值保存，对于后端接口来说，它就是一个String类型的数据。
顺带提一下，mysql保存base64是用longblob字段类型，在你保存这种数据时，可能会因为数据量过大而报错，可以上网查看相应的解决办法，增加max_allowed_packet。

接下来来说一下图片回显
很简单！
首先，根据你的接口查询到相应得数据，然后

let carMap = {};
        carMap["name"] = '车辆照片';
        carMap["url"] = "data:image/png;base64," + carPicture;
        this.carPictureList.push(carMap);

carPicture 为你后端查询的图片base64字符串
carPictureList是你绑定在upload上的那个文件列表
这样你的图片就能回显在页面上了。