Springmvc html上传图片转码为base64通过ajax存入数据库中（纯html存储图片不能使用路径）完整过程

这篇文章主要内容：实现spring MVC +Mysql+html+ajax 一个完整的交互过程

【SpringMvc】从数据库读取用户信息，其中图片路径响应变成了text/html，导致图片无法显示

https://ask.csdn.net/questions/716140
以上是我原来的提问，后来问了老师才解决的。提问的截图已经很清楚了。

我原来的想法是：个人主页修改资料，用户名、性别、地区、个人签名、还有头像【主意这里是图片】。其余的信息都是文本信息，直接可以通过json传递就好了。图片不能单纯的通过存储地址信息来传递，因为后端返回信息会把地址看作文本信息。

主页html：

目录结构：

主页部分html代码

<form id="userForm"  enctype="multipart/form-data"><div style="margin-top: 10px"><span>头像: </span>&nbsp;&nbsp;<img  id="testpic" src="resource/static/img/头像.jpg" style="height: 100px;width: 100px;border-radius:50% ;border: black 1px"/><input id="Head_img" class="uploading" type="file" name="file" accept="image/jpg,image/jpeg,image/gif,image/png"/><input type="hidden" id="hiddenFile" name="hiddenFile" disabled="disabled" value="hiddenFile" readonly="readonly"><br></div><div><span>Email：</span><!--隐藏字段，用来保存email --><input type="text" id="hiddenEmail" name="hiddenEmail" disabled="disabled" value="hiddenEmail" readonly="readonly"><br></div><div><span>用户名：</span><input type="text" id="edit_username" class="username" name="username" placeholder="请输入用户名" ><input type="hidden" id="hiddenUsername" name="hiddenUsername" disabled="disabled" value="hiddenUsername" readonly="readonly"><br></div>..............</form>

主页jquery上传图片代码
需要提交的信息有email 和图片。email是要判断哪个用户，数据库对比，然后把图片存在该用户的信息里

 function _addImgFileListener(obj, fun) {$(obj).change(function() {try {var file = this.files[0];var reader = new FileReader();reader.onload = function() {var img = new Image();img.src = reader.result;img.onload = function() {var w = img.width,h = img.height;var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');$(canvas).attr({width: w,height: h});ctx.drawImage(img, 0, 0, w, h);var base64 = canvas.toDataURL('image/jpeg', 0.5);var result = {url: window.URL.createObjectURL(file),base64: base64,clearBase64: base64.substr(base64.indexOf(',') + 1),suffix: base64.substring(base64.indexOf('/') + 1, base64.indexOf(';')),};fun(result);}}reader.readAsDataURL(this.files[0]);} catch(e) {_showMsg(e);}});}$(function () {
//TODO 上传图片！！！！！！！！！！！！！！！！！！！！！！！！！！！！！_addImgFileListener("#Head_img", function(data) {console.log(data.base64);var  file = data.base64;$("#testpic").attr("src",data.base64);//创建FormData()var formdata = new FormData();//获取用户名 隐藏字段var emailKey = $("#hiddenEmail").val();//将文件添加到formdata里面formdata.append("imgFile",file);formdata.append("email",emailKey);$.ajax({url: "./upload",type:"post",data:formdata,processData: false,  // 不处理数据！！！contentType: false ,  // 不设置内容类型！！！success:function (e) {//控制台打印返回信息console.log(e);//返回信息替换 掉img的src属性 $("#img_nav").attr("src",e);},error:function () {alert("请检查网络或者传输数据有错");}})});
}

后台控制器类

  @ResponseBody@RequestMapping(value = "/upload" )public String upload(@RequestParam("imgFile") String imgFile,@RequestParam("email") String email) {System.out.println("进入上传图片的后台");System.out.println(email+"1+++++++++++"+imgFile);domeImage dg = new domeImage();//我把图片存在D盘，命名  调用转码类boolean flag =dg.base64ToImage(imgFile,"D:\\2.png");System.out.println("flag= "+flag);//user类就不列举了，常见的类封装信息存储调用User user = new User();user.setImg(imgFile);user.setEmail(email);String resMsg= user.getImg();System.out.println("/upload 里面的 base64编码 "+resMsg);//userDao  Dao类一般是处理数据库信息的UserDao userDao = new UserDao();String url = "jdbc:mysql://localhost:3306/web";//我的数据库登录名和密码 一般的是root 和rootString dauser ="root";String dbpass ="123456";JDBCUtil util =new JDBCUtil(url,dauser,dbpass);//检查数据库中是否已经注册过了userDao.setUtil(util);System.out.println("接收到Ajax请求.1");System.out.println(user);String img_url =userDao.Setimg_Url(user);System.out.println("flag==="+img_url);return imgFile;}

图片Base64转码类
控制器类有调用base64ToImage这个方法。

    public static boolean base64ToImage(String base64, String path) {// 对字节数组字符串进行Base64解码并生成图片if (base64 == null){ // 图像数据为空return false;}BASE64Decoder decoder = new BASE64Decoder();try {// Base64解码byte[] bytes = decoder.decodeBuffer(base64);for (int i = 0; i < bytes.length; ++i) {if (bytes[i] < 0) {// 调整异常数据bytes[i] += 256;}}// 生成jpeg图片OutputStream out = new FileOutputStream(path);out.write(bytes);out.flush();out.close();return true;} catch (Exception e) {return false;}}

数据库类

package XXXX......;
import java.sql.Connection;
import java.sql.DriverManager;public class JDBCUtil {private String url;     //url地址private String dbuser;  //数据库的用户名private String dbpass;  //数据库的登录密码public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public String getDbuser() {return dbuser;}public void setDbuser(String dbuser) {this.dbuser = dbuser;}public String getDbpass() {return dbpass;}public void setDbpass(String dbpass) {this.dbpass = dbpass;}public JDBCUtil() {super();}public JDBCUtil(String url, String dbuser, String dbpass) {super();this.url = url;this.dbuser = dbuser;this.dbpass = dbpass;}//静态代码块，加载驱动static{try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException e) {e.printStackTrace();}}//对外提供一个连接数据库的方法public Connection getConnection() throws Exception{return DriverManager.getConnection(this.url, this.dbuser, this.dbpass);}}

UserDao类处理用户信息和数据库信息

 public class UserDao {//因为这个操作类就是对数据库进行操作，所有要连接数据库private JDBCUtil util;public JDBCUtil getUtil() {return util;}public void setUtil(JDBCUtil util) {this.util = util;}public String Setimg_Url (User user) {Connection conn = null;PreparedStatement stat = null;ResultSet res = null;//user类在控制器中已经set信息了，类封装的好处~~String email_msg=user.getEmail();String imgurl = user.getImg();String Stremail_msg = "'"+email_msg+"'";String sql = "update loginuser set img=? where email="+Stremail_msg;try {conn = util.getConnection();//创建连接stat = conn.prepareStatement(sql);stat.setString(1, imgurl);stat.executeUpdate();//保存System.out.println("存在这个用户，正在保存img路径。。。。img==" + imgurl);return imgurl;}catch (Exception e) {e.printStackTrace();}finally{try {if(conn!=null&!conn.isClosed()){conn.close();}} catch (SQLException e) {e.printStackTrace();}}return "fail";}}

整个的思路是：前端上传图片，传给后台，后台调用转码函数，把转码的数据给Dao处理信息。Dao类根据传递的email来判断是哪个用户的头像信息。成功返回信息。

结果：

代码中有很多system.out.println，这是我用来检查有没有错误的，和观察是否进入某个方法。因为。。。比较难debug排错。我也不是很懂这个调试，所以只能前台alert 后台system.out…观察

如有错误，欢迎指正。

Springmvc html上传图片转码为base64通过ajax存入数据库中（纯html存储图片不能使用路径）完整过程相关推荐

前端上传图片回显并用base64编码，后端做解码储存，存储图片路径在.properties文件中配置（以上传身份证照片为例）
前端页面: <form id="kycForm" enctype="multipart/form-data"> <input type=&qu ...
【springmvc】——上传图片
在页面实现添加上传商品图片功能. springmvc中对多部件类型解析在页面form中提交enctype="multipart/form-data"的数据时,需要springmv ...
微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）
文章目录 SVG 简介什么是SVG SVG有哪些优势 SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG 展示效果 SVG 简 ...
JAVA解析html文档，替换img图片路径成base64编码，并将文章存入数据库
转载自 JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库开发环境:struts2+ spring + hibernate 数据库:oracle 需求:在HTML编 ...
JS同时上传表单图片和表单信息并把上传信息存入数据库，带php后端源码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 利用JQ,jquery.form.js,bootstrap实现上传表单图片和表单信息并把上传的图片地址,inp ...
在 PostgreSQL 中使用码农很忙 IP 地址数据库
在下载到码农很忙 IP 地址数据库后,我们可以将其存储在 PostgreSQL 数据库中,并在需要查询某个 IP 对应的位置数据时,通过 SQL 语句获取正确的结果.这是一种很便捷的使用方式,并且在增 ...
uniapp上传图片压缩并转base64码、base64转图片路径
文章目录一.上传图片压缩再转base64码 1.选择图片 [官方api](https://uniapp.dcloud.net.cn/api/media/image?id=chooseimage) 2 ...
ASCII码和 Base64编码
ASCII编码简介 ASCII码(American Standard Code for Information Interchange, 美国信息互换标准代码) 是基于拉丁字母的一套电脑编码系统, ...
SpringBoot 二维码生成base64并上传OSS
SpringBoot 二维码生成base64并上传OSS 基础环境 SpringBoot.Maven 代码实现 1.添加依赖  <dependency> ...

Springmvc html上传图片转码为base64通过ajax存入数据库中（纯html存储图片不能使用路径）完整过程

Springmvc html上传图片转码为base64通过ajax存入数据库中（纯html存储图片不能使用路径）完整过程相关推荐

最新文章

热门文章