使用formdata存儲圖片和通過base64解析二進制轉換而成的字符串，然後以字符串返回給前端

前言

圖片的存儲和從數據庫中取出並在前端顯示，這個問題我搞了3天左右，終於有了一個解決方案。

1.首先我是通過formdata將圖片傳到後臺，後臺自動自動將其轉爲字符串，然後將字符串轉爲二進制，因爲我的數據庫中的圖片類型是image，所以是二進制類型的。

2.從數據庫取出二進制數據，並轉爲字符串。我遇到的問題就出現在這裏，我直接將字符串給了前端，沒有進行base64解碼，所以前端不認識該數據格式，所以圖片顯示不出來。

詳細說明

什麼都不說了，直接上代碼。

@RequestMapping("/saveAuth.action")
	public void UserAuth(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
		
		Logger.getLogger(AuthController.class).info("********************保存用戶******************************");
		DiskFileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		String openid = req.getParameter("openid");
		Logger.getLogger(AuthController.class).info(openid);
		try {	
			List<?> items = upload.parseRequest(req);
			Map<String, Object> map = new HashMap<String, Object>();
			Logger.getLogger(AuthController.class).info(JSON.toJSONString(items));
			for(Object object:items){
				FileItem fileItem = (FileItem)object;
				
				map.put(fileItem.getFieldName(), fileItem.getString("utf-8"));
			}	
			
			Logger.getLogger(AuthController.class).info(JSON.toJSONString(map));
			TbRzsj tbRzsj = new TbRzsj();
			tbRzsj.setName((String)map.get("username"));
			tbRzsj.setOpenid((String)map.get("openId"));
			SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			String rzrq = df.format(new Date());
			tbRzsj.setRzrq(df.parse(rzrq));
			tbRzsj.setTel((String)map.get("phone"));
			tbRzsj.setSfzhm((String)map.get("identity"));
			if(map.get("img-one") != null && map.get("img-one") != ""){
				tbRzsj.setSfzzm(((String)map.get("img-one")).getBytes());
			}
			if(map.get("img-two") != null && map.get("img-two") != ""){
				tbRzsj.setSfzfm(((String)map.get("img-two")).getBytes());
			}
			
			int result = authService.insert(tbRzsj);	
			Map<String, Object> resultMap = new HashMap<>();
			if (result>0){
				//數據保存成功
				resultMap.put("success", true);
				resultMap.put("msg","認證成功");
			} else {
				//數據保存失敗
				resultMap.put("success", false);
				resultMap.put("msg","認證失敗");
			}
			response.setContentType("text/html;charset=utf-8");
			PrintWriter out = response.getWriter();
			out.print(new JSONObject(resultMap));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

這個是將圖片存入到數據庫中的。

2.讀取二進制文件，並將圖片顯示在前端

這裏我就不從數據庫中獲取數據了，最主要的是後面的兩個方法。

package test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.UnsupportedEncodingException;

import org.junit.Test;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

import sun.misc.BASE64Decoder;

public class ByteToImage {

	@Test
	public void test(){
		String path = "G:\\data.txt";
		
		String content = readToString(path);
		
		JSONObject jsonObject = (JSONObject)JSON.parse(content);
		
		JSONArray jsonArray = jsonObject.getJSONArray("jsxx");
		
		jsonObject = (JSONObject)jsonArray.get(0);
		
		try {
			System.out.println(jsonObject.get("pic1").toString());
			
			String result = parseBase64(jsonObject.get("pic1").toString());
			
			System.out.println(result);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
	
	/**
     * 讀取文件數據
     * @param fileName
     * @return
     */
    private String readToString(String fileName) {
        String encoding = "GBK";
        File file = new File(fileName);
        Long filelength = file.length();
        byte[] filecontent = new byte[filelength.intValue()];
        try {
            FileInputStream in = new FileInputStream(file);
            in.read(filecontent);
            in.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        try {
            return new String(filecontent, encoding);
        } catch (UnsupportedEncodingException e) {
            System.err.println("The OS does not support " + encoding);
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 解析BASE64
     * @param picStr
     * @return
     * @throws IOException
     */
    private String parseBase64(String picStr) throws IOException {
        BASE64Decoder base64Decoder = new BASE64Decoder();
        return new String(base64Decoder.decodeBuffer(picStr));
    }
}

將上面的模擬數據放到G:/data.txt中，寫個測試文件，將pic1的字符串界面，然後將解碼後的字符串的放在前端的<img src="">中就可以顯示圖片了。

我獲得的字符串是這樣格式的：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7gAOQWRvYmUAZAAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMAQcHBw0MDRgQEBgUDg4OFBQODg4OFBEMDAwMDBERDAwMDAwMEQwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAK7A+gDAREA

然後放入前端就可以了。

結束語

寫的不好，歡迎大家指點