使用base64上传图片

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18870420619/article/details/82216598

前端页面如下： 

<div class="col-sm-12">
                <img id="finalImg" class="img-circle" th:if="${user.headUrl==null}" src="/img/circle_03.png">
                <img id="finalImg" class="img-circle" th:if="${user.headUrl!=null}"  th:src="${user.headUrl}">
                <input id="base64URL" name="headUrl" type="hidden" value="${user.headUrl}">
                <input id="upload0" name="file" accept="image/*" type="file" style="display: none">
      			</span>
      			<span class="fl" id="replaceImg" >
      				<p class="avatar-per">上传头像</p>
      				  <p class="color-999"> 仅支持JPG、PNG格式，文件小于3M</p>
      			</span>
      		</div>

js文件：

<script type="text/javascript">
//弹出框水平垂直居中
(window.onresize = function () {
    var win_height = $(window).height();
    var win_width = $(window).width();
    if (win_width <= 768){
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": 0
        });
    }else{
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": (win_width - $(".tailoring-content").outerWidth())/2
        });
    }
})();

//弹出图片裁剪框
$("#replaceImg").on("click",function () {
    $(".tailoring-container").toggle();
});
//图像上传
function selectImg(file) {
    if (!file.files || !file.files[0]){
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var replaceSrc = evt.target.result;
        //更换cropper的图片
        $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
    $("#personForm").attr("enctype","multipart/form-data");

    var formData = new FormData($("#personForm")[0]);
    formData.append("imgBase64",encodeURIComponent(file.files[0]));//
}
//cropper图片裁剪
$('#tailoringImg').cropper({
    aspectRatio: 1/1,//默认比例
    preview: '.previewImg',//预览视图
    guides: false,  //裁剪框的虚线(九宫格)
    autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
    movable: false, //是否允许移动图片
    dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
    movable: true,  //是否允许移动剪裁框
    resizable: true,  //是否允许改变裁剪框的大小
    zoomable: false,  //是否允许缩放图片大小
    mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
    touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
    rotatable: true,  //是否允许旋转图片
    crop: function(e) {
        // 输出结果数据裁剪图像。
    }
});
//旋转
$(".cropper-rotate-btn").on("click",function () {
    $('#tailoringImg').cropper("rotate", 45);
});
//复位
$(".cropper-reset-btn").on("click",function () {
    $('#tailoringImg').cropper("reset");
});
//换向
var flagX = true;
$(".cropper-scaleX-btn").on("click",function () {
    if(flagX){
        $('#tailoringImg').cropper("scaleX", -1);
        flagX = false;
    }else{
        $('#tailoringImg').cropper("scaleX", 1);
        flagX = true;
    }
    flagX != flagX;
});

//裁剪后的处理
$("#sureCut").on("click",function () {
    if ($("#tailoringImg").attr("src") == null ){
        return false;
    }else{
        var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
        var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
        $("#finalImg").prop("src",base64url);//显示为图片的形式
        $("#base64URL").val(base64url);//将转换后的编码保存到input供后台使用
        //关闭裁剪框
        closeTailor();
    }
});
//关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}
</script>

使用ajax提交表单数据：

$("#savePerson").click(function() {
            var name = $("#userName").val();
            $.ajax({
                  url : 'savePerson',
                  type : 'post',
                  data : {
                    headUrl : $("#base64URL").val(),
                    name : $("#userName").val(),
                    sex : $('input[name="optionsRadiosinline"]:checked').val(),
                    age : $("#age").val(),
                    email : $("#email").val(),
                    job : $("#work").val(),
                    interest : $("#hobbies").val()
                  },
                  success : function(data) {
                    if (data.success) {
                      /* window.location.reload(); */
                      layer.msg(data.msg)
                    }
                  }
                });
            $(this).attr('disabled', true); // 设置变灰按钮
            setTimeout("$('#savePerson').removeAttr('disabled')", 2000);// 设置一秒后按钮显现
          });

Mysql数据库中使用blob类型存储：