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

最新推荐文章于 2021-06-16 23:27:27 发布

原创

最新推荐文章于 2021-06-16 23:27:27 发布 · 置顶 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#springmvc #base64 #静态html图片交互 #数据库 #ajax

本文详细介绍了如何使用SpringMVC、HTML、Ajax和Base64编码将图片上传并存储到数据库的过程。在前端，用户通过HTML页面上传头像图片，图片被转化为Base64字符串。Ajax负责将包含图片数据和邮箱信息的请求发送到后端。后端控制器接收请求，调用Base64转码函数，然后由DAO层处理入库操作，根据邮箱匹配用户并更新头像信息。最后，成功存储后返回相应信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

https://ask.youkuaiyun.com/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>
          &