最近正在写接口————关于图片上传

前台使用Vuejs,采用base64上传图片，fileData:"data:image/jpeg;base64,9j/4AAQSk................."把这个data直接放在地址栏，也能显示图片，但是到后台用base64解码完生成新的图片后，打开新图片，竟然打不开，后来发现fileData中data:image/jpeg;base64,是标识符，不是图片内容，需要除掉，再解码。发现自己对base64不是很理解，就找了一下资料看看：

base64是啥？Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045～RFC2049，上面有MIME的详细规范。

网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data URI scheme。
　　Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到谷歌的地址栏中并转到，就能看到它了.

　在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
　　目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
　　base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

需求：将Base64编码图片以BLOB类型存入数据库，需要时取出显示

后台：

String base64str=new String(log.getRequest_imgdata());//log为实体 括号里面是图像的get方法 返回为Byte[]型

String new str=new String("\"data:image/jpg;base64,"+base64str+"\"");//拼装Base64字符串头

response.getWriter().write(newstr);//将完整Base64字符串返回前台

前台Js：

var srcUrl = appJP.urlReqImg +"?log_id="+row.log_id;//请求URL

        $.get(srcUrl,function(data){

            var imgWindow = $("#imgDetail").html("<img src="+data+">");//接收Base64字符串，并转换为图片显示

            $("#showImg").window({title:"图片详情",width:"auto"}).window("open").window("center");

        })

 

以上已实现从数据库取出BLOB类型Base64图像数据（Java中为byte[]）转换为字符串，并发送至前台显示

但是在测试中发现稍微大一点的图像（几百KB）在部分IE浏览器中不能显示，查询资料发现是IE8以下对Base64解码长度限制的问题

 

解决方案：更换后台到前台传输图像数据形式为流的形式

后台：　　

 

String base64str=new String(log.getRequest_imgdata());

BASE64Decoder decoder=new BASE64Decoder();byte[] imgbyte=decoder.decodeBuffer(base64str);//解码Base64图片数据

response.setContentType("image/jpeg");

ServletOutputStream outputStream = response.getOutputStream();

outputStream.write(imgbyte);

outputStream.flush();

前台js:

var srcUrl = appJP.urlReqImg +"?log_id="+row.log_id;var imgWindow = $("#imgDetail").html("<img src="+srcUrl+">");

$("#showImg").window({title:"图片详情",width:"auto"}).window("open").window("center");