最近做的项目涉及到前后端分离,其中有上传图片的功能,前端传到后台的数据是采用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数据格式的数据进行打印,可以看到其实是一串很长的字符串:
上传成功后页面效果: