Vue+ElementUI将文件转码base64通过spring boot传入数据库

前端 

• :action：后端接收文件的接口地址(可为空)
• :http-request：通过方法发起请求
• :show-file-list   显示文件列表
• on-success   上传成功之后执行
• before-upload    上传之前执行，通常做文件验证
• on-change    文件状态发生改变时的狗子，添加文件、上传成功和上传失败时都会被调用

发起请求的函数

 uploadAvatar(param){
      let formData = new FormData()
      formData.append('userName', this.userInfo.userName) // 额外参数，带上用户信息传入后端
      formData.append('file', param.file)
      uploadAvatar(formData).then(res=>{
        // console.log(res)
        if (res.code == 1){
          location.reload()
          this.$message({
            message:"头像上传成功",
            type:"success"
          })
        }
      })
    },

文件转码函数 

 //将图片转成base64
    changeAvatar(file){
      let reader = new FileReader()
      reader.onload = () =>{
        let _base64 = reader.result
        let BASE64 = _base64.split(',')
        console.log('BASE64---->',BASE64)
        this.userInfo.Avatar = BASE64[1]
      }
      reader.readAsDataURL(file.raw)
    }

文件验证

    beforeAvatarUpload(file) {
      let types = ['image/jpeg','image/jpg','image/png']
      const isImage = types.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      if (!isImage) {
        this.$message.error('上传头像图片只能是JPG、JPEG、PNG格式!');
      }
      return isLt2M||isImage;
    }

后端

接口

 /**
     * 上传头像
     * @return
     */
    @RequestMapping("/uploadAvatar")
    public R uploadAvatar(@RequestPart("file") MultipartFile multipartFile,@RequestParam("userName") String userName) throws IOException {
        String file = Base64Util.convertToBase64(multipartFile);

        LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(User::getUserName,userName);
        User user = new User();
        user.setUserHeadImg(file);
        userService.update(user,queryWrapper);

        return R.success(file);
    }

 使用工具类需要加上这个依赖

 <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>

转码工具类

package com.kai.utils;

import org.apache.commons.codec.binary.Base64;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;

public class Base64Util {
    /**
     * 文件Base64转码
     *
     * @param file 文件
     * @return
     * @throws IOException 比如读写文件出错时
     */
    public static final String convertToBase64(MultipartFile file)throws IOException {
        String base64Encoder = "";
        byte[] buffer = null;
        try {
            buffer = file.getBytes();
            base64Encoder = Base64.encodeBase64String(buffer);
            //防止Base64编码中含有换行符，统一全部替换掉
            base64Encoder.replaceAll("[\\s*\t\n\r]", "");
            //添加前端读取需要的前缀
            base64Encoder = "data:iamge/jpeg;base64," + base64Encoder;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return base64Encoder;
    }
}