前臺傳base64格式的圖片,後臺來接受處理.
阿新 • • 發佈：2019-01-07
1.首先你得知道前臺傳的是什麼玩意.
<body> <input type="file" id="image"><br/> <div id="div"></div> </body> <script type="text/javascript" src="juqery-1.8.3.js"></script> <script type="text/javascript"> //給file新增一個事件,當選擇了檔案後,執行下面uploadFile的方法 $("#image").bind("change", function() { uploadFile($(this)); }); //通過onChange直接獲取base64資料 function uploadFile(file) { var reader = new FileReader(); var allowImgFileSize = 2100000; //上傳圖片最大值(單位位元組)（ 2 M = 2097152 B ）超過2M上傳失敗 var file = $("#image")[0].files[0]; var imgUrlBase64; if (file) { //將檔案以Data URL形式讀入頁面 imgUrlBase64 = reader.readAsDataURL(file); reader.onload = function (e) { //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//擷取base64碼部分（可選可不選，需要與後臺溝通） if (allowImgFileSize != 0 && allowImgFileSize < reader.result.length) { alert( '上傳失敗，請上傳不大於2M的圖片！'); return; }else{ //將轉碼後的資料展示出來 $("#div").html(reader.result)//data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/ } } } } </script>
前臺最終轉的結果是:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/......是這樣的.也就是說
data:+檔案格式+";"+base64+","+核心資料.
取到了轉碼後的資料,那麼傳給後臺,後臺怎麼解決呢?
2.後臺怎麼解析Base64
其實這跟後臺不後臺沒有什麼關係,關鍵是你得理解什麼是base64,什麼是檔案.
base64只是位元組的編碼方式.檔案是位元組的資料集.
想要轉成檔案,那麼就只需要解碼成位元組陣列,然後通過位元組流寫成檔案即可.如下圖程式碼,
/** * 1.獲取到後面到資料 */ String data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...."; String base64Data = data.split(",")[1]; /** * 2.解碼成位元組陣列 */ Decoder decoder = Base64.getDecoder(); byte[] bytes = decoder.decode(base64Data); /** * 3.位元組流轉檔案 */ FileOutputStream fos = null; try { fos = new FileOutputStream("E:\\aaa.jpg"); fos.write(bytes); return name; } catch (IOException e) { e.printStackTrace(); } finally { if (fos != null){ try { fos.close(); } catch (IOException e) { e.printStackTrace(); } } }
即可.