SSM+layUI上传图片，配置tomcat虚拟路径，保存图片到项目中

本博文为原创，如有不足，欢迎指出，转载请注明来源。

最近在用SSM+layUI做上传图片时遇到了很多问题，特在此记录一下。

先将整体页面效果和问题发下，最后再贴代码。

首先楼主的 页面如下：

上传头像后：

在这里选择图片后，因为有图片的预览，在上传成功的回调函数中一定要对上传按钮的样式进行修改，否则样式会很难看，如下：

图片预览与修改的代码如下：

 //上传成功
      if(res.code==0){
        $('.upload-img').html(' 
');
         $('.layui-btn-img').css({"margin-left":"104px","width":"90px","margin-top":"6px"});
        $('.layui-btn-img').text("重新上传");      
        return layer.msg('上传成功',{time:700});
      }

上传图片时，用String path = request.getSession().getServletContext().getRealPath("/")获取到的路径是服务器的路径，图片在上传后是保存到服务器的，项目从服务器移除后图片就没有了（可以移除前拷贝出来备份），为解决这个问题可以配置tomcat的虚拟路径。

在tomcat的server.xml的HOST节点中加：

docBase为你要保存的项目路径，如想保存到项目中，可以写项目的路径。

path为调用图片的路径：如调用a.jpg

/plug-in/images/people/a.jpg

下面贴详细的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>






<%@include file="/plug-in/main/main-js.jsp" %>




  

      头像
      

      

      

            

		    上传头像
        
 
    
    
  

    用户名
    

      
    
  
  

    密码
    

      
    
  
   

    性别
    

      
      
    
  
    

      手机号
      

        
      
    
    

      邮箱
      

        
      
    
  

    

      立即提交
      重置
    
  

上传图片controller层：

// 用户头像上传
	@RequestMapping(value = "/uploadHeadImage", method = { RequestMethod.POST })
	@ResponseBody
	public JSONObject uploadHeadImage(@RequestParam("file") MultipartFile file, @ModelAttribute User user, HttpServletRequest request, InputStream stream)
			throws IOException {
		Assert.notNull(file, "上传文件不能为空");
		String src="/plug-in/images/people/";
		//String path = request.getSession().getServletContext().getRealPath("/"+src);
		String path="C:/Users/lenove/Desktop/why123/why123/src/main/webapp/plug-in/images/people";
		JSONObject json = new JSONObject();
		//System.currentTimeMillis()根据系统时间产生随机数，保证上传的图片名字不一样
		String name=System.currentTimeMillis()+file.getOriginalFilename();
		File dir = new File(path, name);
		src=src+name;
		if (!dir.exists()) {
			dir.mkdirs();
			json.put("msg","上传成功");
			json.put("code",0);
			json.put("src",src);
		} else {
			json.put("msg","上传失败");
			json.put("code",1);
		}
		file.transferTo(dir);
		return json;
	}