<div>
	<button type="button" class="layui-btn" id="mulUpload">图片上传</button>
	<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
		预览图：
		<div class="layui-upload-list" id="mulPreview"></div>
	</blockquote>
</div>

<link rel="stylesheet" href="/Public/viewer/viewer.min.css">
<script src="/Public/viewer/viewer.min.js"></script>

<script>
	var mul_imgs = ['http://i.srsr.cc/uploads/info/23021810323430.jpg', 'http://i.srsr.cc/uploads/info/23021810324186.jpg', 'http://i.srsr.cc/uploads/info/23021810324430.jpg', 'http://i.srsr.cc/uploads/info/23021810325261.jpg']

	function showImgs() {
		$('#mulPreview').empty()
		mul_imgs.forEach((img, index) => {
			$('#mulPreview').append(`
					<div style="background:url(${img}) center center no-repeat;">
						<img src="${img}" alt="图${index + 1}" />
						<i class="layui-icon layui-icon-close-fill" onclick="delImg(${index})"></i>
					</div>
				`)
			$('#mulPreview').viewer('update')
		})
	}

	function delImg(index) {
		mul_imgs.splice(index, 1)
		showImgs()
	}

	showImgs()

	layui.use(['upload', 'layer', 'form'], function () {
		let upload = layui.upload
		let layer = layui.layer
		let form = layui.form

		upload.render({
			elem: '#mulUpload'
			, url: '__CONTROLLER__/uploadImg' //此处配置你自己的上传接口即可
			, multiple: true
			, data: { path: '/info/' }
			, before: function (obj) {
				layer.load()
			}
			, done: function (res) {
				mul_imgs.push(res.data.fullSrc)
				console.log('mul_imgs', mul_imgs)
			}
			, allDone: function (res) {
				layer.closeAll('loading')
				showImgs()
			}
		})

	})
</script>

<style>
	#mulPreview {
		display: flex;
		flex-wrap: wrap;
	}

	#mulPreview div {
		margin: 0 16px 16px 0;
		position: relative;
		width: 150px;
		height: 150px;
		box-shadow: 0 2px 5px 1px #555;
		border-radius: 4px;
		background-size: cover !important;
	}

	#mulPreview div img {
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	#mulPreview div i {
		position: absolute;
		top: -5px;
		right: 5px;
		font-size: 30px;
		color: red;
		opacity: 0.6;
	}
</style>