这篇文章主要内容：实现spring MVC +Mysql+html+ajax 一个完整的交互过程
【SpringMvc】从数据库读取用户信息，其中图片路径响应变成了text/html，导致图片无法显示
/questions/716140
以上是我原来的提问，后来问了老师才解决的。提问的截图已经很清楚了。
我原来的想法是：个人主页修改资料，用户名、性别、地区、个人签名、还有头像【主意这里是图片】。其余的信息都是文本信息，直接可以通过json传递就好了。图片不能单纯的通过存储地址信息来传递，因为后端返回信息会把地址看作文本信息。
主页html：
目录结构：
主页部分html代码
<form id="userForm" enctype="multipart/form-data"><div style="margin-top: 10px"><span>头像: </span> <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存储图片不能使用路径）完整过程
