前端以BASE64碼的形式上傳圖片
一直有一個很苦惱的問題困擾着鐵柱兄，每次上傳圖片的時候前端要寫一大堆js，然后后台也要寫一堆java代碼做處理。於是就在想，有沒有簡單又方便的方法把圖片上傳。今天算是搞定了。現在發出來做個記錄，也給大家做個參考。
話不多說，直接上代碼，一邊做一遍講解。
首先新建一個工程
工程名隨意取啊，不要太較真。然后進入index.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8 <title>Insert title here</title>
9 </head>
10 <body>
11 <div>
12
13 <input type="file" name="file" onchange="showImg(this)"><!--選擇圖片-->
14 <img id="getImg"/><!-- 選擇后展示的圖片 -->
15 <input class="" type="button" id="btnBut" name="" > <!-- 提交 -->
16 </div>
17 <script type="text/javascript">
18 function showImg(cell){//獲取圖片路徑賦給img標簽，從而展示出所選擇的圖片
19 document.getElementById('getImg').src= window.URL.createObjectURL(cell.files[0]); 20 } 21 function image2Base64(img) {//轉base64的方法
22 var canvas = document.createElement("canvas"); 23 canvas.width = img.width; 24 canvas.height = img.height; 25 var ctx = canvas.getContext("2d"); 26 ctx.drawImage(img, 0, 0, img.width, img.height); 27 var dataURL = canvas.toDataURL("image/png");//規定圖片是什么格式，image/格式
28 return dataURL; 29 } 30
31 $("#btnBut").click(function(){ 32 var imgurl =$('#getImg')[0].src;//獲取的圖片路徑
33 var img = new Image(); 34 img.src=imgurl; 35 var base64 = image2Base64(img); 36 UploadPic(base64); 37 }) 38
39 function UploadPic(base64) { 40 $.ajax({//把編號帶到后台去
41 type : 'post', 42 url : '${pageContext.request.contextPath}/Img', 43 data:{'imageData': base64}, 44 success : function(data){//成功的事件
45
46 }, 47 error : function(data){//失敗的事件
48 alert(data); 49 } 50 }); 51 } 52 </script>
53 </body>
54 </html>
一定一定要切記，需要jquery.min.js。
其實寫完jsp之后我還是很滿足的。各種加起來也才54行代碼，簡單易懂。當然，這個界面是根據自己的需要去做的，我這相當於提供了一個基線的版本，你可以根據這個去改造。
代碼寫到這里的時候，圖片就已經轉為base64碼了，后台只管接受就ok。如果在轉換的時候出現問題，可以試着alert輸出一下，看看具體是哪里出現的問題。如果解決不了，可以放在評論區，我有時間的話會過來看一下，我們一起解決。
現在我們把項目跑起來看一下效果。
在紅框這里加上一句alert語句，看一下圖片是否已經轉換成base64碼。
OK，這時圖片已經出來了。按正常流程來講的話，當我點擊提交按鈕時，alert會輸入圖片的base64碼。現在我來點擊一下看看。
彈框出來的這個就是圖片的base64碼。
jsp搞定之后，我們現在來寫java代碼。
package com.tiezhu.action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(name="Base64Img",urlPatterns="/Img")
public class Base64Img extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String base64String=req.getParameter("imageData");//獲取前端傳來的base64碼
System.out.println(base64String);
}
}
按流程來講，現在當我點擊提交后，是可以在eclipse的控制台中看到base64碼了。來試試看
紅框里面就是從界面傳過來的圖片的base64碼。
當我們得到了base64碼之后，就隨便你怎么玩了。存數據庫也好，轉成圖片也好。
在做項目的時候，我推薦是java轉成圖片，將圖片存儲起來后數據庫就只需要存圖片的名稱就好了。這樣能節約數據庫的存儲。
這里就不說怎么存數據庫了，我們直接把base64碼轉為圖片。
package com.tiezhu.action;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.tomcat.util.codec.binary.Base64;
import sun.misc.BASE64Decoder;
@WebServlet(name="Base64Img",urlPatterns="/Img")
public class Base64Img extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String base64String=req.getParameter("imageData");//獲取前端傳來的base64碼
base64String = base64String.split(",")[1];//去掉base64碼的data:image/png;base64,
System.out.println(base64String);
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解碼
byte[] bytes = decoder.decodeBuffer(base64String);
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {// 調整異常數據
bytes[i] += 256;
}
}
// 生成jpeg圖片
OutputStream out = new FileOutputStream("C:\\ceshi.png");
out.write(bytes);
out.flush();
out.close();
} catch (Exception e) {
}
}
}
做到這里，文章到這里就結束了。其實在這里有一個坑，一開始我沒注意到，一直以為是導的包有問題。后面才發現，是base64的問題，原來從前端傳過來的base64碼是不能這么直接轉成功圖片的，雖然能夠生成文件，但是文件根本打不開。需要對傳過來的base64碼做
base64String = base64String.split(",")[1];//去掉base64碼的data:image/png;base64,
這個處理。
好了。本次文章到這里就結束了。如果文章對你有用，請多支持鐵柱兄。