layui实现图片虚拟路径上传,预览和删除的例子

效果如下所示：

前端：

<style type="text/css">
 #detailTbody tr:hover {
   background: #fff;
 }

.layui-form-label {
   width: 110px;
 }

.uploader-list {
   margin-left: -15px;
 }

.uploader-list .info {
   position: relative;
   margin-top: -25px;
   background-color: black;
   color: white;
   filter: alpha(Opacity=80);
   -moz-opacity: 0.5;
   opacity: 0.5;
   width: 100px;
   height: 25px;
   text-align: center;
   display: none;
 }

.uploader-list .handle {
   position: relative;
   background-color: #ff6a00;
   color: white;
   filter: alpha(Opacity=80);
   -moz-opacity: 0.5;
   width: 100px;
   text-align: right;
   height: 18px;
   margin-bottom: -18px;
   display: none;
 }

.uploader-list .handle span {
   margin-right: 5px;
 }

.uploader-list .handle span:hover {
   cursor: pointer;
 }

.uploader-list .file-iteme {
   margin: 12px 0 0 15px;
   padding: 1px;
   float: left;
 }
</style>
   <div class="layui-upload">

<button type="button" class="layui-btn layui-btn-warm" id="test2">单据上传（可上传多张）</button>
     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88％">
         预览图：

<div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
         <div id="" class="file-iteme" th:each="img :${data.orderVoucher}">
           <div class="handle"><i class="layui-icon" style="color: white;margin-right: 40％">&#xe640;</i>
           </div>
           <img th:src="${img}" alt="单据" width="100" height="100" onclick="showBig(this)">
         </div>

</div>
     </blockquote>
   </div>

js：

layui.use(['form', 'layer', 'laydate', 'upload'], function () {
   $ = layui.jquery;
   var form = layui.form,
     layer = layui.layer,
     laydate = layui.laydate,
     upload = layui.upload;
   //多图片上传
   upload.render({
     elem: '#test2'
     , url: '/psi/order/uploadImg'
     , multiple: true
     , before: function (obj) {
       layer.msg('图片上传中...', {
         icon: 16,
         shade: 0.01,
         time: 0
       })
     }
     , done: function (res) {
       layer.close(layer.msg());//关闭上传提示窗口
       //上传完毕
       $('#uploader-list').append(
         '<div id="" class="file-iteme">' +
         '<div class="handle"> <i class="layui-icon" style="color: white ;margin-right: 40％">&#xe640;</i></div>' +
         '<img style="color: white;width: 100px;height: 100px" onclick="showBig(this)" src=' + res.url + ' >' +
         '</div>'
       );
     }
   });
 });

$(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
   if (event.type === "mouseenter") {
     //鼠标悬浮
     $(this).children(".info").fadeIn("fast");
     $(this).children(".handle").fadeIn("fast");
   } else if (event.type === "mouseleave") {
     //鼠标离开
     $(this).children(".info").hide();
     $(this).children(".handle").hide();
   }
 });
 $(document).on("click", ".file-iteme .handle", function(event){
   $(this).parent().remove();
 })
})
function showBig(obj) {
 var url = (obj.src);
 var index = layer.open({
   type: 2,
   content: url,
   area: ['100％', '100％'],
   title: "单据",
   maxmin: true,
   closeBtn: 1
 });
 layer.full(index);
}

controller层

 @RequestMapping(value = "/uploadImg")
 @ResponseBody
 public  Map<String,Object> uploadImg(MultipartFile file,HttpServletRequest request){
    Map<String,Object> data = new HashMap<>();
    String url = "";
    if (!file.isEmpty()){
      url = FileUploadUtil.saveImage(file,"orderVoucher",request);
    }
    data.put("url",url);
    return data;
 }

FileUploadUtil类

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.Date;

public class FileUploadUtil {

public static String fileUploadPathUrl="D:\\svnproject\\wechatprintingPicture";

/**
  * 图片读取存放获取路径
  *
  * @param file   文件
  * @param fileName 文件存放的目录名
  * @return
  */
 public static String saveImage(MultipartFile file, String fileName, HttpServletRequest requestFileUploadUtil) {
   long timestamp = new Date().getTime();//获取时间戳
   String realPath = fileUploadPathUrl;//项目路径
   String newFileName = timestamp + "" + file.getOriginalFilename(); //file.getOriginalFilename()是获取原始图片的拓展名，newfileName新的文件名字
   String path = realPath + "/" + fileName;
   String newPath = path + "/" + newFileName;////图片存放的位置路径
   File filePath = new File(path + "/");
   if (!filePath.exists()) {
     filePath.mkdirs();
   }
   if (!file.isEmpty()) {
     BufferedOutputStream out = null;
     try {
       out = new BufferedOutputStream(
           new FileOutputStream(new File(newPath)));
       out.write(file.getBytes());
       out.flush();
       out.close();
     } catch (FileNotFoundException e) {
       e.printStackTrace();
     } catch (IOException e) {
       e.printStackTrace();
     }
   }
   String url = requestFileUploadUtil.getScheme() + "://" + requestFileUploadUtil.getServerName() + ":" + requestFileUploadUtil.getServerPort() + requestFileUploadUtil.getContextPath() + "/" + fileName + "/" + newFileName;
   return url;
 }
}

yml虚拟路径配置

spring:
resources:
 static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.uploadPath}

web:
uploadPath: D:/svnproject/wechatprintingPicture

来源：https://blog.csdn.net/wenshao145/article/details/89176321