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;
   }

   <br>

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>'
                              );
                          });
                      }
   
                      //其他代码
                  });

效果图