關於base64上傳圖片問題
最近正在寫介面————關於圖片上傳
前臺使用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中，data表示取得資料的協定名稱，image/png 是資料型別名稱，base64 是資料的編碼方法，逗號後面就是這個image/png檔案base64編碼後的資料。 目前，Data URI scheme支援的型別有：data:,文字資料data:text/plain,文字資料data:text/html,HTML程式碼data:text/html;base64,base64編碼的HTML程式碼
需求：將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");