上传图片，并且图片能永久保存（tomcat配置虚拟路径）

问题：

文件上传时一般生成临时文件来保存目录，这个临时文件在tomcat下，修改代码或重启tomcat临时文件下保存的文件或图片都会消失不见了，但是若保存在本地磁盘上，用<img>标签中的src直接访问本地图片路径的话，会使图片破裂，显示不出来

解决：

把文件存储在本地，并且在tomcat里面的server.xml配置虚拟路径

具体代码：

1、html代码（layui前端框架，可参考layui官方文档）

layui文件上传:https://www.layui.com/doc/modules/upload.html

......
<div class="layui-form-item">
	    <label class="layui-form-label">商品封面图片上传路径</label>
		<div class="layui-upload">
		  <button type="button" class="layui-btn" id="imagebtn">上传图片</button><!--点击图片上传的按钮-->
		  <input type="hidden" id="image" name="image" value=""/><!--存储后台传来的图片路径和图片名称-->
		  <div class="layui-upload-list">
		    <img class="layui-upload-img" id="imageshow"><!--显示图片-->
		    <p id="demoText"></p><!--或图片上传失败，显示重传-->
		  </div>
		</div> 
   </div> 
......

页面效果：

2、script代码

<script type="text/javascript" th:inline="javascript">
   layui.use(['jquery','upload'],function(){
      var $=layui.$,upload=layui.upload;
      var uploadInst=upload.render({
         elem:'#imagebtn'
         ,url:'/text'
         ,accept:'images'  //允许上传的文件类型
         ,field:'file'   //设定文件域的字段名
         before:function(obj){  //文件上传前的回调
            //预读本地文件示例，不支持ie8
            obj.preview(function(index,file,result){
               $("#imageshow").attr('src',result);
            });
         }
         ,done:function(res){ //上传后的回调
            //如果上传失败
            if(res.code>0){
               return layer.msg('上传失败');
            }else{
               $("#image").val(res,image);//上传成功之后，从后台传来的图片存储路径和名称
            }
         }
         ,error:function(){
            //演示失败状态，并实现重传
            var demoText=$('#demoText');
            demoText.html('<span style="color: #FF5722;margin-left: 2%;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
             demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	     });
         }
      })
   })
</script>

页面效果：

没有后台之前会提示“上传失败”，但还是会显示图片，同时页面左下角，会提示“上传失败重试”，我这里是上传成功了

3、后端代码

@RequestMapping(value="/text" ,method=RequestMethod.Post)
@ResponseBody
public Map<Strring,Object> text(@RequestParam("file") MultipartFile file,HttpServletRequest request,HttpServletResponse){
   response.setContType("text/html;charset=utf-8");
   String tempPath="G:/images/upload/";  //存到本地
   File tmpFile=new File(tempPath);
   if(!tmpFile.exists()){
      //创建临时目录
      tmpFile.mkdir();
   }
   Map<String,Object> map =new HashMap<>();
   //获取原始文件名
   String fileName=file.getOriginalFilename();
   String houzuiming=fileName.substring(fileName.lastIndexOf(".")+1);//后缀名
   //新文件名
   String newFileName=UUID.randomUUId()+"."+houzuiming;  //这里也可用随机数作新文件名
   try{
      FileOutputStream fos=new FileOutputStream(tempPath+newFileName);
      InputStream in=file.getInputStream();
      int b=0;
      while((b=in.read()) != -1){
         fos.write(b);
      }
      fos.close();
      in.close();
      map.put("code",0);//上传成功
      map.put("image","/imagespath/"+newFileName);  //server.xml中的虚拟路径
   }catch(Exception e){
      map.put("code",1);
      e.printStackTrace();
   }
   return map;
}

4、tomcat的server.xml中配置虚拟路径（重要）

<!--Host中加入以下代码-->
<Context docBase="G:\\images\\upload" path="/imagespath" reloadable="true"></Context>

5、前台显示

<img src="/imagespath/图片名称"></img>

 

最后，把项目重启就可以了

页面效果：