前言

在webmen文檔和論壇中都沒(méi)找到多圖上傳的示例，自己找了一個(gè)，整合了一下湊合用

insert頁(yè)面

1. 引入css

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

   muti-upload.css內(nèi)容如下

   .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. 添加容器

   將需要多圖上傳的字段改造成下面的格式，增加預(yù)覽和上傳功能，如商品詳情，這里字段名為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;">
                  預(yù)覽圖：
                  <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替換為你的圖片上傳鏈接，如系統(tǒng)默認(rèn)的/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());//關(guān)閉上傳提示窗口
          //上傳完畢
          $('#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);
      }
   });
   
   //鼠標(biāo)懸浮事件
   $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
      if(event.type === "mouseenter"){
          //鼠標(biāo)懸浮
          $(this).children(".info").fadeIn("fast");
          $(this).children(".handle").fadeIn("fast");
      }else if(event.type === "mouseleave") {
          //鼠標(biāo)離開
          $(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);
      //刪除標(biāo)簽
      $(this).parent().remove();
   });
   //多圖上傳 end

update頁(yè)

? 1-3步驟與insert頁(yè)差不多相同，多了第4步j(luò)s調(diào)整和第5步初始化數(shù)據(jù)

4. 調(diào)整第3步第一行放到獲取數(shù)據(jù)庫(kù)記錄前面

5. 初始化數(shù)據(jù)

   在給表單初始化數(shù)據(jù)時(shí)判斷指定字段并遍歷賦值，例如我這里的商品詳情初始化:

   <script>
      // 相關(guān)接口
      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 = []; //多圖上傳
   
      // 獲取數(shù)據(jù)庫(kù)記錄
      layui.use(["form", "util", "popup"], function () {
          let $ = layui.$;
          $.ajax({
              url: SELECT_API,
              dataType: "json",
              success: function (res) {
   
                  // 給表單初始化數(shù)據(jù)
                  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>'
                              );
                          });
                      }
   
                      //其他代碼
                  });

效果圖