SpringMVC保存图片路径到MySQL和回显图片（完整可用）

上传图片

首先在pom文件中引入文件上传的jar包

		<!--文件上传-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>

在springmvc配置文件中开启文件上传功能，开启此功能后再配合form表单的enctype属性（下面代码会有）控制器才能接收到图片

	<!--开启上传文件功能-->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="100000"/>
        <property name="maxInMemorySize" value="10240" />
    </bean>

页面用form表单提交图片
注意：必须在form表单中添加enctype属性，这点很重要

enctype=“multipart/form-data”

用 jquery.form.min.js 插件提交图片

<form action="purchase/imgtest" method="post" id="formimg" enctype="multipart/form-data">
    <input type="file" onchange="showImgToView('imgFileID')"  name="userimg" id="imgFileID" accept="image/gif,image/jpeg,image/png,image/jpg">
    <img src="#" alt="image" class="imgs" id="imgs">
    <input type="submit" value="提交">
</form>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/jquery.form.min.js"></script>

<script>
    /*选择图片后把图片显示在img标签      开始  */
    
    var fileReader = new FileReader();
    
    // file标签发生改变后把图片显示在img标签
    function showImgToView(imgFileID){
    
        var imgFile = $("#"+imgFileID).get(0).files[0];
        
        fileReader.readAsDataURL(imgFile);
    }
    
    // img标签加载图片
    fileReader.onload = function (evt) {
        $("#imgs").attr("src",evt.target.result)
    }
    /*选择图片后把图片显示在img标签      结束  */
    

    // 上传图片
    function uploadPho() {
        $("#formimg").ajaxSubmit(function () {

        })
    }

控制器接收图片，保存路径

	@RequestMapping("/imgtest")
    public void imgTest(@RequestParam("userimg") MultipartFile fileImg, HttpServletRequest request) throws IOException {

        // 获取文件原始名称
        String filename = fileImg.getOriginalFilename();
        
        // 获取后缀  可以用于判断图片的格式
        String suffix  = FilenameUtils.getExtension(filename);
        
        // 获取当前时间
        SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
        
        // 以当前时间命名文件，因为时间永远不会重复，文件名就不会重复
        String prefix = format.format(new Date());
        
        // 也可以用这个方法重命名 图片，让图片名唯一
        //String prefix  = UUID.randomUUID().toString().replaceAll("-", "");

		// 把图片放在项目根目录中，方便以后取出图片
        String realPath = request.getSession().getServletContext().getRealPath("/upload");

        // 新文件名称
        String newFileName = prefix+"."+suffix;

        //把内存图片写入磁盘中
        fileImg.transferTo(new File(realPath+"/"+newFileName));

        User user = new User();
        // 用户ID
        user.setUserId(1);
        
        // 获取新文件的相对路径，并把路径存进实体类中
        user.setUserImgPath("upload/"+newFileName);

		// 把图片路径保存到数据库中
        userService.updateUserInfo(user);

		// 欢呼一下下
        System.out.println("终于成功啦！！！");
    }

图片回显到img标签

接下来是查询图片回显到img标签中

根据用户ID 查询头像

public void userImg(int userid){
	User user = userDao.findUserByid(userid);// 查询数据库账号
	// 判断是否有图片路径
    if (user.getUserImgPath() != null) {
	 	// 把图片路径保存到session中
		session.setAttribute("userImgPath", user.getUserImgPath());
    }
}

这样就可以了，在js中把路径取出拼接到img标签就可以了

html代码

<img src="#" id="userimgId" class="layui-nav-img">

js代码

// 获取保存头像路径的session
  var photoPath = "${sessionScope.userImgPath}";
  // 判断session是否为空
  if(photoPath==""){
    //session为空代表没有图片，那就调用自己准备好在根目录的图片
    $("#userimgId").attr("src","${pageContext.request.contextPath}/static/img/headImg.jpg");
  }else {
  	// 从session中取出图片的相对路径，拼接到img标签
    $("#userimgId").attr("src","${pageContext.request.contextPath}/${sessionScope.userImgPath}");
  }

搞定啦！完整流程，一字不落！