本文介绍如何在Tomcat中配置虚拟路径以避免项目重启导致的静态文件丢失问题，并详细讲解了通过server.xml配置及IDEA设置实现的方法。同时，提供了SpringMVC环境下图片上传的完整代码示例。
在实际开发中，有时候需要把静态文件或者图片上传到tomcat中，但是如果上传到跟项目同目录的webapp下，当项目重新部署或者tomcat由于其他原因重启后，这些文件将会消失，势必会影响到现网的生产，所以我们需要把这些文件放到服务器的其他物理路径下，通过tomcat的server.xml 文件的配置来对这个路径做映射，使其通过ip地址也可以访问到这些文件，或者直接用idea设置虚拟路径。那开始吧！
第一种：通过tomcat的server.xml 文件来配置虚拟路径
假设我的图片路径如下：
这呢就是数据库的路径：
首先打开tomcat文件夹下conf/server.xml
打开之后，在Host里面加入：
即 ：docBase为物理路径 ， path为虚拟路径 ；
<Context path="/upload" docBase="D:/JAVA/upload"/>
这样当我们读取到这个/upload时就会转为 D:/JAVA/upload，之后加上后面的路径凑成完成绝对路径，进行访问
然后在设置idea：
让修改后的tomcat的server.xml配置生效，这样就可以了
图片访问路径就为 示例：
http://localhost:8088/upload/f13ab0d8-2727-4b86-9c70-91f4d629d2fb.jpg
第二种：直接用idea设置虚拟路径
取消这个勾选
设置虚拟路径：
找到我们存放图片的路径
点击OK,然后再设置访问路径，即可
接下来就是SpringMVC图片上传：
首先导入上传文件依赖的包：
<!-- 上传文件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>在spring-mvc.xml文件中配置文件上传的bean
<!-- 上传文件的配置 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
<property name="maxUploadSize">
<value>32505856</value><!-- 上传文件大小限制为31M，31*1024*1024 -->
</property>
<property name="maxInMemorySize">
<value>4096</value>
</property>
</bean>此图为注册页面（较为简单）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
<link href="../res/css/register.css" rel="stylesheet">
<script type="text/javascript" src="../res/js/jquery-3.4.1.min.js" ></script>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all"/>
</head>
<body>
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<div class="col-lg-7">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">创建账号!</h1>
</div>
<form class="user" id="myform">
<div class="form-group">
<input type="text" required class="form-control form-control-user" id="regist_name" name="userName" placeholder="注册用户名">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-user" id="regist_class" name="regist_class" placeholder="年龄">
</div>
<div class="form-group">
<input type="text" required class="form-control form-control-user" id="regist_account" name="userAccount" placeholder="注册账号">
</div>
<div class="form-group">
<input type="text" required class="form-control form-control-user" id="regist_pwd" name="userPassword" placeholder="注册密码">
</div>
<div class="form-group" style="height: 90px;">
<div class="layui-form-mid layui-word-aux" style="margin-left: -100px;"><img src="" id="prePic" width="90px" height="90px"></div>
<div class="input-group">
<a href="javascript:;" class="a-upload"> <input type="file" name="userFile" id="imgFile" >点击这里上传文件</a>
</div>
</div>
<input type="button" class="btn btn-primary btn-user btn-block" value="注册" id="registSubmit">
<hr>
</form>
<hr>
<div class="text-center">
<a class="small" href="login.html">已有账号? 登录!</a> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
$("#registSubmit").on("click",function () {
var url = "/loginRegister/userRegister.action"; //写好后台地址
var data = new FormData(document.getElementById("myform"));
$.ajax({
async:true,
url:url,
type:"POST",
data:data,
dataType:"json",
processData: false,//使用数据不做处理
contentType: false,//不要设置Content-type请求头
success:function (obj) {
console.info("ss"+obj.numberMes+obj.messageMes);
if(obj.numberMes == 1){
location.href="login.html";
//alert("成功");
}else{
alert("失败");
//console.info(obj);
//location.href="error.html";
}
},
error:function (e) {
console.info(e);
}
});
})
//文件查看
$('#imgFile').change(function () {
//获取input file的files文件数组;
//$('#usersImage')获取的是jQuery对象，.get(0)转为原生对象;
//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
var file = $('#imgFile').get(0).files[0];
//创建用来读取此文件的对象
var reader = new FileReader();
//使用该对象读取file文件
reader.readAsDataURL(file);
//读取文件成功后执行的方法函数
reader.onload = function (e) {
//读取成功后返回的一个参数e，整个的一个进度事件
console.log(e);
//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//的base64编码格式的地址
$('#prePic').get(0).src = e.target.result;
}
});
})
</script>
</html>Controller代码
/**
* 用户注册
*/
@RequestMapping(value="/userRegister",method=RequestMethod.POST)
public HintMes register(@RequestParam("userFile") MultipartFile userFile, Users user, HttpServletRequest request) throws IOException {
if(!"".equals(userFile.getOriginalFilename())){
String fileName =Tools.writeImg(userFile,request,url);
user.setUserImg("upload/"+fileName);
}
String userAccount=user.getUserAccount();
HintMes hintMes = new HintMes();
// 如果数据库中没有该用户，可以注册，否则跳转页面
Users users =usersService.findByUserName(userAccount);
if (users == null) {
// 添加用户
usersService.register(user);
// 注册成功跳转到主页面
//mv.setViewName("login");
hintMes.setNumberMes(1);
hintMes.setMessageMes("注册成功");
}else {
// 注册失败跳转到错误页面
// mv.setViewName("error");
hintMes.setNumberMes(0);
hintMes.setMessageMes("注册失败");
}
return hintMes;
}
Tools代码：
/**
* 写入图片
*
* @param userFile 传入的图片
* @param request 请求
* @param url 真实图片地址
* @return fileName 返回图片地址
* @throws IOException
*/
public static String writeImg(MultipartFile userFile,HttpServletRequest request,String url) throws IOException {
String name =userFile.getOriginalFilename();//得到原文件名
//获取后缀名
String suffixName = name.substring(name.lastIndexOf("."));
//拼接
String fileName = UUID.randomUUID().toString()+suffixName;
//保存文件
userFile.transferTo(new File(url+"/"+fileName));
return fileName;//返回图片地址保存到数据库
}上传结果如下：
扫一扫
1150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
