webmin-admin 多图上传

plugin->admin->app->view->table视图里面的 create和modify.html 加上这个["uploadImages", "上传多图片"]

plugin->admin->app->common->layui.php 里面加上这段代码即可

EOF;
}

public function uploadImages($options)
{
    [$label, $field, $value, $props, $verify_string, $required_string, $class] = $this->options($options);
    $props['acceptMime'] = $props['acceptMime'] ?? 'image/gif,image/jpeg,image/jpg,image/png';
    $props['url'] = $props['url'] ?? '/app/admin/upload/image';

    $props['multiple'] = isset($props['multiple']) ? ($props['multiple'] ? 1 : 0) : 0;

    $id = $this->createId($field);

    unset($props['lay-verify']);
    $props['field'] = $props['field'] ?? '__file__';
    $options_string = '';
    $props = $this->prepareProps($props);
    $options_string .= "\n" . $this->preparePropsToJsObject($props, 1, true);

    $this->htmlContent .= <<<EOF

<div class="layui-form-item">
$label
<div class="$class">
<div class="layui-upload">
<input type="text" class="uploader-list" style="display:none" name="$field" value="$value" id="$id"/>
<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-$id">
</div>
</blockquote>

       <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="multi-upload-$id" permission="app.admin.upload.image">
           <i class="layui-icon layui-icon-upload"></i>多图上传
       </button>

       <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-$id"  permission="app.admin.upload.attachment">
        <i class="layui-icon layui-icon-align-left"></i>选择图片
      </button>
   </div>
</div>

</div>
EOF;

    $this->jsContent .= <<<EOF

// 字段 {$options['label']} $field
layui.use(["upload", "layer"], function() {
var upload = layui.upload;
var $ = layui.$;
// 修改：增加trim()处理初始值，避免开头逗号问题
let multiple_images = layui.$("#$id").attr("value").trim().split(",").filter(img => img.trim() !== "");

$("#attachment-choose-$id").on("click", function() {
    parent.layer.open({
        type: 2,
        title: "选择附件",
        content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
        area: ["95%", "90%"],
        success: function (layero, index) {
            parent.layui.$("#layui-layer" + index).data("callback", function (data) {
                // 上传完毕
                $('#uploader-list-$id').append(
                    '<div class="file-iteme">' +
                    '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                    '<img src=' + data.url + ' alt="' + data.name + '" >' +
                    '</div>'
                );

                // 追加图片成功追加文件名至图片容器
                multiple_images.push(data.url);
                $('#$id').val(multiple_images.join(","));
            });
        }
    });
});

upload.render({
    elem: '#multi-upload-$id',$options_string
    before: function(obj){
        layer.msg('图片上传中...', {
            icon: 16,
            shade: 0.01,
            time: 0
        });
    },
    done: function(res){
        layer.close(layer.msg()); // 关闭上传提示窗口
        // 上传完毕
        $('#uploader-list-$id').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);
        $('#$id').val(multiple_images.join(","));
    }
});

// 鼠标悬浮事件
$(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);
    }
    // 重新赋值
    $('#$id').val(multiple_images.join(","));
    // 删除标签
    $(this).parent().remove();
});
// 多图上传 end

});
EOF;
}