一直有一個很苦惱的問題困擾着鐵柱兄，每次上傳圖檔的時候前端要寫一大堆js，然後背景也要寫一堆java代碼做處理。于是就在想，有沒有簡單又友善的方法把圖檔上傳。今天算是搞定了。現在發出來做個記錄，也給大家做個參考。
話不多說，直接上代碼，一邊做一遍講解。
首先建立一個工程
工程名随意取啊，不要太較真。然後進入index.jsp
一定一定要切記，需要jquery.min.js。
其實寫完jsp之後我還是很滿足的。各種加起來也才54行代碼，簡單易懂。當然，這個界面是根據自己的需要去做的，我這相當于提供了一個基線的版本，你可以根據這個去改造。
代碼寫到這裡的時候，圖檔就已經轉為base64碼了，背景隻管接受就ok。如果在轉換的時候出現問題，可以試着alert輸出一下，看看具體是哪裡出現的問題。如果解決不了，可以放在評論區，我有時間的話會過來看一下，我們一起解決。
現在我們把項目跑起來看一下效果。
在紅框這裡加上一句alert語句，看一下圖檔是否已經轉換成base64碼。
OK，這時圖檔已經出來了。按正常流程來講的話，當我點選送出按鈕時，alert會輸入圖檔的base64碼。現在我來點選一下看看。
彈框出來的這個就是圖檔的base64碼。
jsp搞定之後，我們現在來寫java代碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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);
}
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碼轉為圖檔。
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.apache.tomcat.util.codec.binary.Base64;
import sun.misc.BASE64Decoder;
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,這個處理。好了。本次文章到這裡就結束了。如果文章對你有用，請多支援鐵柱兄。