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

最新推荐文章于 2024-04-05 13:42:26 发布

qq_39098505

最新推荐文章于 2024-04-05 13:42:26 发布

阅读量5.3k

点赞数 2

分类专栏： SSM layUI JS 文章标签： layUI SSM

本文链接：https://blog.csdn.net/qq_39098505/article/details/80930724

版权

JS 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

layUI

6 篇文章 0 订阅

订阅专栏

SSM

5 篇文章 0 订阅

订阅专栏

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

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

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

首先楼主的页面如下：

上传头像后：

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

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

 //上传成功
      if(res.code==0){
        $('.upload-img').html('<img class="layui-upload-img" style="width:80px;height:100px" src="'+res.src+'" id="demo1"> <p id="demoText"></p>');
         $('.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节点中加：

<Context path="/plug-in/images/people" docBase="C:\Users\lenove\Desktop\why123\why123\src\main\webapp\plug-in\images\people"

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+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<%@include file="/plug-in/main/main-js.jsp" %>
</head>
<body>
<div>
<form class="layui-form" action="" method="post" enctype="multipart/form-data" lay-filter="user-edit">
  <div class="layui-form-item" style="margin-top:15px;width:500px;">
      <label class="layui-form-label">头像</label>
      <div class="layui-upload">
      <div class="layui-upload-list">
      <div class="upload-img"></div>
            <p id="demoText"></p>
		    <button type="button" class="layui-btn layui-btn-img" lay-verify="required" id="test1">上传头像</button>
        </div> 
    </div>
    </div>
  <div class="layui-form-item" style="margin-top:15px;width:500px;">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input" value="">
    </div>
  </div>
  <div class="layui-form-item" style="margin-top:15px;width:500px;">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input" value="">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="gender" value="男" title="男" checked="">
      <input type="radio" name="gender" value="女" title="女">
    </div>
  </div>
    <div class="layui-form-item" style="margin-top:15px;width:500px;">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-block">
        <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input" value="">
      </div>
    </div>
    <div class="layui-form-item" style="margin-top:15px;width:500px;">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input type="email" name="phone" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" value="">
      </div>
    </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
<script type="text/javascript">
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
  form.val('user-edit', {   
    "gender":'${user.gender}'
  });
  //自定义验证规则
  form.verify({
    userName: function(value){
      if(value.length < 3){
        return '用户名至少得3个字符';
      }
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    }
    ,password:[/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
});

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,method:'post'
    ,url: '/why123/user/uploadHeadImage'    
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      if(res.code==0){
        $('.upload-img').html('<img class="layui-upload-img" style="width:80px;height:100px" src="'+res.src+'" id="demo1"> <p id="demoText"></p>');
        $('.layui-btn-img').css({"margin-left":"104px","width":"90px","margin-top":"6px"});
        $('.layui-btn-img').text("重新上传");      
        return layer.msg('上传成功',{time:700});
      }
    }
  }); 
 });
</script>
</body>
</html>

上传图片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;
	}