webman-admin多图上传预览和删除

前言

在webmen文档和论坛中都没找到多图上传的示例，自己找了一个，整合了一下凑合用

insert页面

1. 引入css

   <link rel="stylesheet" href="/app/admin/admin/css/muti-upload.css" />
   

   muti-upload.css内容如下

   .uploader-list .handle {
       position: relative;
       background-color: black;
       color: white;
       filter: alpha(Opacity=80);
       -moz-opacity: 0.6;
       opacity: 0.6;
       text-align: right;
       height: 20px;
       margin-bottom: -20px;
       display: none;
   }
   
   .uploader-list .handle i {
       display: grid;
       place-items: center;
       height: 20px;
   }
   
   .uploader-list .handle i:hover {
       cursor: pointer;
   }
   
   .uploader-list .file-iteme {
       margin: 12px 0 0 15px;
       padding: 1px;
       float: left;
   }
   
   .uploader-list .file-iteme img{
       height: 128px;
       width: 128px;
   }
   

   
   

2. 添加容器

   将需要多图上传的字段改造成下面的格式，增加预览和上传功能，如商品详情，这里字段名为details

   <div class="layui-form-item">
       <label class="layui-form-label">商品详情</label>
       <div class="layui-input-block">
           <div class="layui-upload">
               <input type="text" style="display:none" name="details" value="" id="details"/>
               <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                   预览图：
                   <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                   </div>
               </blockquote>
   
               <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="multi-upload">
                   <i class="layui-icon layui-icon-upload"></i>多图上传
               </button>
           </div>
       </div>
   </div>
   

3. 添加js

   在html文件最后增加下面的js代码，将其中的UPLOAD_API替换为你的图片上传链接，如系统默认的/app/admin/upload/image

   //多图上传 start
   var multiple_images = []; //多图上传array,update也需要将这行放js最前面
   
   var upload = layui.upload;
   var $ = layui.$;
   upload.render({
       elem: '#multi-upload',
       url: UPLOAD_API,
       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 class="file-iteme">' +
               '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
               '<img src='+ res.data.url +' alt="'+ res.data.name +'" >' +
               '</div>'
           );
   
           //追加图片成功追加文件名至图片容器
           multiple_images.push(res.data.url);
           $('#details').val(multiple_images);
       }
   });
   
   //鼠标悬浮事件
   $(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){
       var delImg = $(this).parent().children("img").attr("src")
       var index = multiple_images.indexOf(delImg);
       if (index !== -1) {
           multiple_images.splice(index, 1);
       }
       //重新赋值
       $('#details').val(multiple_images);
       //删除标签
       $(this).parent().remove();
   });
   //多图上传 end
   

update页

​ 1-3步骤与insert页差不多相同，多了第4步js调整和第5步初始化数据

4. 调整第3步第一行放到获取数据库记录前面

5. 初始化数据

   在给表单初始化数据时判断指定字段并遍历赋值，例如我这里的商品详情初始化:

   <script>
       // 相关接口
       const PRIMARY_KEY = "id";
       const SELECT_API = "/app/admin/mall-goods/select" + location.search;
       const UPDATE_API = "/app/admin/mall-goods/update";
       const UPLOAD_API = "/app/admin/upload/image";
   
       var multiple_images = []; //多图上传
   
       // 获取数据库记录
       layui.use(["form", "util", "popup"], function () {
           let $ = layui.$;
           $.ajax({
               url: SELECT_API,
               dataType: "json",
               success: function (res) {
   
                   // 给表单初始化数据
                   layui.each(res.data[0], function (key, value) {
                       let obj = $('*[name="'+key+'"]');
                       if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
                       if (obj[0].nodeName.toLowerCase() === "textarea") {
                           obj.val(value);
                       } else {
                           obj.attr("value", value);
                           obj[0].value = value;
                       }
   
                       // 商品详情初始化
                       if (key === "details" && value != ""){
                           multiple_images = value.split(",");
                           $.each(multiple_images, function(index, value) {
                               $('#uploader-list').append(
                                   '<div class="file-iteme">' +
                                   '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                                   '<img src='+value +' alt="'+ value +'" >' +
                                   '</div>'
                               );
                           });
                       }
                       
                       //其他代码
                   });
   

效果图