当前位置:   article > 正文

使用formdata存储图片和通过base64解析二进制转换而成的字符串,然后以字符串返回给前端_formdata转base64

formdata转base64

前言

图片的存储和从数据库中取出并在前端显示,这个问题我搞了3天左右,终于有了一个解决方案。

1.首先我是通过formdata将图片传到后台,后台自动自动将其转为字符串,然后将字符串转为二进制,因为我的数据库中的图片类型是image,所以是二进制类型的。

2.从数据库取出二进制数据,并转为字符串。我遇到的问题就出现在这里,我直接将字符串给了前端,没有进行base64解码,所以前端不认识该数据格式,所以图片显示不出来。

详细说明

什么都不说了,直接上代码。

  1. @RequestMapping("/saveAuth.action")
  2. public void UserAuth(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {
  3. Logger.getLogger(AuthController.class).info("********************保存用户******************************");
  4. DiskFileItemFactory factory = new DiskFileItemFactory();
  5. ServletFileUpload upload = new ServletFileUpload(factory);
  6. String openid = req.getParameter("openid");
  7. Logger.getLogger(AuthController.class).info(openid);
  8. try {
  9. List<?> items = upload.parseRequest(req);
  10. Map<String, Object> map = new HashMap<String, Object>();
  11. Logger.getLogger(AuthController.class).info(JSON.toJSONString(items));
  12. for(Object object:items){
  13. FileItem fileItem = (FileItem)object;
  14. map.put(fileItem.getFieldName(), fileItem.getString("utf-8"));
  15. }
  16. Logger.getLogger(AuthController.class).info(JSON.toJSONString(map));
  17. TbRzsj tbRzsj = new TbRzsj();
  18. tbRzsj.setName((String)map.get("username"));
  19. tbRzsj.setOpenid((String)map.get("openId"));
  20. SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  21. String rzrq = df.format(new Date());
  22. tbRzsj.setRzrq(df.parse(rzrq));
  23. tbRzsj.setTel((String)map.get("phone"));
  24. tbRzsj.setSfzhm((String)map.get("identity"));
  25. if(map.get("img-one") != null && map.get("img-one") != ""){
  26. tbRzsj.setSfzzm(((String)map.get("img-one")).getBytes());
  27. }
  28. if(map.get("img-two") != null && map.get("img-two") != ""){
  29. tbRzsj.setSfzfm(((String)map.get("img-two")).getBytes());
  30. }
  31. int result = authService.insert(tbRzsj);
  32. Map<String, Object> resultMap = new HashMap<>();
  33. if (result>0){
  34. //数据保存成功
  35. resultMap.put("success", true);
  36. resultMap.put("msg","认证成功");
  37. } else {
  38. //数据保存失败
  39. resultMap.put("success", false);
  40. resultMap.put("msg","认证失败");
  41. }
  42. response.setContentType("text/html;charset=utf-8");
  43. PrintWriter out = response.getWriter();
  44. out.print(new JSONObject(resultMap));
  45. } catch (Exception e) {
  46. e.printStackTrace();
  47. }
  48. }

这个是将图片存入到数据库中的。

2.读取二进制文件,并将图片显示在前端

这里我就不从数据库中获取数据了,最主要的是后面的两个方法。

  1. package test;
  2. import java.io.File;
  3. import java.io.FileInputStream;
  4. import java.io.FileNotFoundException;
  5. import java.io.IOException;
  6. import java.io.UnsupportedEncodingException;
  7. import org.junit.Test;
  8. import com.alibaba.fastjson.JSON;
  9. import com.alibaba.fastjson.JSONArray;
  10. import com.alibaba.fastjson.JSONObject;
  11. import sun.misc.BASE64Decoder;
  12. public class ByteToImage {
  13. @Test
  14. public void test(){
  15. String path = "G:\\data.txt";
  16. String content = readToString(path);
  17. JSONObject jsonObject = (JSONObject)JSON.parse(content);
  18. JSONArray jsonArray = jsonObject.getJSONArray("jsxx");
  19. jsonObject = (JSONObject)jsonArray.get(0);
  20. try {
  21. System.out.println(jsonObject.get("pic1").toString());
  22. String result = parseBase64(jsonObject.get("pic1").toString());
  23. System.out.println(result);
  24. } catch (IOException e) {
  25. // TODO Auto-generated catch block
  26. e.printStackTrace();
  27. }
  28. }
  29. /**
  30. * 读取文件数据
  31. * @param fileName
  32. * @return
  33. */
  34. private String readToString(String fileName) {
  35. String encoding = "GBK";
  36. File file = new File(fileName);
  37. Long filelength = file.length();
  38. byte[] filecontent = new byte[filelength.intValue()];
  39. try {
  40. FileInputStream in = new FileInputStream(file);
  41. in.read(filecontent);
  42. in.close();
  43. } catch (FileNotFoundException e) {
  44. e.printStackTrace();
  45. } catch (IOException e) {
  46. e.printStackTrace();
  47. }
  48. try {
  49. return new String(filecontent, encoding);
  50. } catch (UnsupportedEncodingException e) {
  51. System.err.println("The OS does not support " + encoding);
  52. e.printStackTrace();
  53. return null;
  54. }
  55. }
  56. /**
  57. * 解析BASE64
  58. * @param picStr
  59. * @return
  60. * @throws IOException
  61. */
  62. private String parseBase64(String picStr) throws IOException {
  63. BASE64Decoder base64Decoder = new BASE64Decoder();
  64. return new String(base64Decoder.decodeBuffer(picStr));
  65. }
  66. }

将上面的模拟数据放到G:/data.txt中,写个测试文件,将pic1的字符串界面,然后将解码后的字符串的放在前端的<img src="">中就可以显示图片了。

我获得的字符串是这样格式的:

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

然后放入前端就可以了。

结束语

写的不好,欢迎大家指点

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/1005571
推荐阅读
相关标签
  

闽ICP备14008679号