上传图片使用base64数据格式传输数据

最近做的项目涉及到前后端分离，其中有上传图片的功能，前端传到后台的数据是采用base64数据格式的，使用base64数据格式对图片进行预览或者回显也是很方便的，之前没有接触过，在此记录一下。

1、base64数据格式简介

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。

2、使用实例

前台jsp页面代码：

<%--
  Created by IntelliJ IDEA.
  User: 20180721
  Date: 2019/6/14
  Time: 17:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    pageContext.setAttribute("path",path);
%>
<html>
<head>
    <title>Title</title>
    <script src="${path}/static/js/jquery.js"></script>
</head>
<script type="text/javascript">
    //给file添加一个事件,当选择了文件后,执行下面uploadFile的方法
    $(function () {
        $("#image").bind("change", function() {
            uploadFile($(this));
        });
    })

    //通过onChange直接获取base64数据
    function uploadFile(f) {
        var reader = new FileReader();
        var allowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        var file = f[0].files[0];
        if (file) {
            //将文件以DataURL形式读取
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                if (allowImgFileSize != 0 && allowImgFileSize < reader.result.length) {
                    alert( '上传失败，请上传不大于2M的图片！');
                    return;
                }else{
                    console.log(reader.result);
                    ajaxUpload(reader.result);
                }
            }
        }
    }

    //ajax异步上传
    function ajaxUpload(base64Data) {
        var url = "${path}/uploadBase64";
        $.ajax({
            url: url,
            type: "post",
            dataType: "text",
            data: {
                base64Data : base64Data
            },
            success: function(data){
                console.log(data);
                //上传成功后将图片展示出来（相当于回显）
                $("#showImg").attr("src",base64Data);
            }
        });
    }
</script>
</head>

<body>
    <input type="file" id="image">
    <img id="showImg">
</body>
</html>

后台上传图片代码：

    @RequestMapping("uploadBase64")
    @ResponseBody
    public String base64UpLoad(String base64Data){
        try{
            String dataPrix = "";
            String data = "";
            if(base64Data == null || "".equals(base64Data)){
                throw new Exception("上传失败，上传图片数据为空");
            }else{
                String [] d = base64Data.split("base64,");
                if(d != null && d.length == 2){
                    dataPrix = d[0];
                    data = d[1];
                }else{
                    throw new Exception("上传失败，数据不合法");
                }
            }

            String suffix = "";
            if("data:image/jpeg;".equalsIgnoreCase(dataPrix)){//base64编码的jpeg图片数据
                suffix = ".jpg";
            } else if("data:image/x-icon;".equalsIgnoreCase(dataPrix)){//base64编码的icon图片数据
                suffix = ".ico";
            } else if("data:image/gif;".equalsIgnoreCase(dataPrix)){//base64编码的gif图片数据
                suffix = ".gif";
            } else if("data:image/png;".equalsIgnoreCase(dataPrix)){//base64编码的png图片数据
                suffix = ".png";
            }else{
                throw new Exception("上传图片格式不合法");
            }
            String tempFileName = UUID.randomUUID().toString() + suffix;

            //因为BASE64Decoder的jar问题，此处使用spring框架提供的工具包
            byte[] bs = Base64Utils.decodeFromString(data);
            try{
                //使用apache提供的工具类操作流
                FileUtils.writeByteArrayToFile(new File("D:/temp/picture/", tempFileName), bs);
            }catch(Exception ee){
                throw new Exception("上传失败，写入文件失败，"+ee.getMessage());
            }
            return "success";
        }catch (Exception e) {
            e.printStackTrace();
            return "error";
        }
    }

将base64数据格式的数据进行打印，可以看到其实是一串很长的字符串：

上传成功后页面效果：

原文链接：https://blog.csdn.net/weixin_42687829/article/details/93975419

你可能也喜欢