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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38641246/article/details/84981378

这篇文章主要内容:实现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 和root
        String 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…观察

如有错误,欢迎指正。

展开阅读全文

没有更多推荐了,返回首页