基于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"><iclass="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=newFileReader();
        	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 格式!');returnfalse;}},}

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

/**
     * 上传文件
     */@PostMapping("/upload")public Rupload(@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上的那个文件列表
这样你的图片就能回显在页面上了。

手赚鸭会员

打赏 收藏 海报 链接