前端 js 将图片转换为base64 后，传入 后端并且将图片存入指定目录

前端部分页面：

<div class="layui-form-item">
    <label class="layui-form-label">专题图片</label>
    <div class="layui-input-inline">
        <div class="layui-upload-list">
            <img class="layui-upload-img" name="titleBase64Img" id="base64Img" src="" style="display: none" width="300px" height="300px;">
        </div>
        <input type="file" id="image" lay-verify="required" οnchange="toBase64()" accept="image/jpeg,image/png,image/jpg" class="layui-upload-button">
    </div>
</div>

前端 js 部分：

function toBase64(){
    var file = document.querySelector('input[type=file]').files[0];
    console.log(file)
    var imgname = file.name;
    var imgNameFlag = imgname.substring(imgname.indexOf(".")+1,imgname.length);
    console.log(imgNameFlag);
    var base64Img;
    var reader = new FileReader();
    reader.onloadend = function () {
        $("#base64Img").attr("style","display:inline-block");
        $("#base64Img").attr("src",reader.result);
        console.log(reader.result);
    };
    if (file) { // 不为空
        reader.readAsDataURL(file); // 和下面的执行时间要有差距不然base64Img 值生取不出来
        setTimeout(function () {
            base64Img = reader.result;
            base64(base64Img,imgNameFlag);
        },12);
    }
}

function base64 (base64Img,imgNameFlag) {
    console.log("参数"+base64Img);
    var data = {};
    data.base64Img = base64Img;
    data.imgNameFlag = imgNameFlag; // 图片格式
    // 向后端发送请求
    $.ajax({
        async : false,    //表示请求是否异步处理
        type : "POST",    //请求类型
        url : "/doBase64",
        dataType : "json",//返回的数据类型
        data : data,
        contentType : "application/x-www-form-urlencoded", // post的方式请求必须配置这个
        success : function (data) {
            console.log(data);
        },
        error : function (data) {
            console.log("do error...")
        }
    });
}

  后端部分：

@RequestMapping(value = "/doBase64",method = RequestMethod.POST)
@ResponseBody
public void doBase64(HttpServletRequest request) {
    String imgIndex = request.getParameter("imgNameFlag");
    String base64Img = request.getParameter("base64Img");
    System.out.println(base64Img);
    System.out.println("图片格式为："+ imgIndex);
    System.out.println(base64Img.substring(0,base64Img.indexOf(",")));;
    System.out.println(base64Img.substring(base64Img.indexOf(",")+1,base64Img.length()));;
    base64Img = base64Img.substring(base64Img.indexOf(",")+1,base64Img.length());
    Base64AndImg.BASE64CodeToBeImage(base64Img,"F:\\img",imgIndex);
}

  工具类：

public static String BASE64CodeToBeImage(String BASE64str,String path,String ext){
    File fileDir = new File(path);
    if (!fileDir.exists()) {
        fileDir.setWritable(true);
        fileDir.mkdirs();
    }
    //文件名称
    String uploadFileName = UUID.randomUUID().toString() + "."+ext;
    File targetFile = new File(path, uploadFileName);
    BASE64Decoder decoder = new BASE64Decoder();
    try{
        OutputStream out = new FileOutputStream(targetFile)
        byte[] b = decoder.decodeBuffer(BASE64str);
        for (int i = 0; i <b.length ; i++) {
            if (b[i] <0) {
                b[i]+=256;
            }
        }
        out.write(b);
        out.flush();
        return  path+"/"+uploadFileName+"."+ext;
    }catch (Exception e){
        e.printStackTrace();
        return null;
    }
}

 防止图片值太大传入后端值为空的情况，特此增加配置参数如下：

server.tomcat.max-http-post-size=-1