前端控件修改:
<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();
}