如何简单修改webman-admin支持多图片上传?

  PHP

前端控件修改:

<div class="layui-form-item">
  <label class="layui-form-label">图片集</label>
  <div class="layui-input-block">
    <div class="layui-upload">
      <input type="hidden" name="images" id="images" value=""> <!-- 存储图片路径 -->
      <div class="layui-upload-list uploader-list" id="preview-container" style="overflow:auto;">
        <!-- 动态加载预览图 -->
      </div>
      <button type="button" class="pear-btn pear-btn-primary" id="multi-upload">多图上传</button>
    </div>
  </div>
</div>

前端逻辑修改:

let uploadedImages = []; // 存储已上传图片路径
layui.upload.render({
  elem: '#multi-upload',
  url: '/app/admin/upload/image', // Webman上传接口
  multiple: true,
  before: function() { layer.msg('上传中...'); },
  done: function(res) {
    if (res.code === 0) {
      uploadedImages.push(res.data.url);
      document.getElementById('images').value = uploadedImages.join(','); 
      // 动态添加预览图
      $('#preview-container').append(`
        <div class="file-iteme">
          <img src="${res.data.url}" style="width:128px;height:128px;">
          <div class="handle"><i class="layui-icon layui-icon-delete" onclick="removeImg('${res.data.url}')"></i></div>
        </div>
      `);
    }
  }
});

// 删除图片函数
function removeImg(url) {
  uploadedImages = uploadedImages.filter(item => item !== url);
  document.getElementById('images').value = uploadedImages.join(',');
  $(`img[src="${url}"]`).parent().remove();
}

LEAVE A COMMENT