Layui多图片上传及删除，只调用一次上传接口，解决图片上传重复问题

演示示例

html

<link href="layui/css/layui.css" rel="stylesheet" />
<script src="layui/layui.js"></script>
<script src="Scripts/jquery.min.js"></script>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
        <i class="layui-icon layui-icon-upload"></i> 多图片上传
    </button>
    <button type="button" class="layui-btn" onclick="uploadImg()">开始上传</button>
    <button type="button" class="layui-btn" onclick="getUploadSrc()">获取已上传图片数据</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
        预览图：
        <div class="layui-upload-list" id="upload-demo-preview">
        </div>
    </blockquote>
</div>
<div>
    已上传图片：
    <div id="uploadResult" onclick="openImg('uploadResult')"></div>
</div>

<style>
    .imgDiv {
        position: relative;
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        display: inline-block;
    }

    .handleDiv {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 100;
        border-radius: 6px;
        top: 0;
        background: rgba(59, 60, 61, 0.6);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .handleDiv .iconI {
            z-index: 999;
            transition: all .3s;
            cursor: pointer;
            font-size: 25px;
            color: rgba(255, 255, 255, 0.91);
            margin: 0 4px;
            display: block;
            width: 25px;
            height: 25px;
            line-height: 25px;
        }
</style>

js

<script>
    //图片绑定鼠标悬浮
    $(document).on("mouseenter", ".imgDiv", function () {
        //鼠标悬浮
        $(this).find('div:first').removeClass('layui-hide');
    }).on("mouseleave", ".imgDiv", function () {
        //鼠标离开
        $(this).find('div:first').addClass('layui-hide');
    });
    var files;
    layui.use(function () {
        var upload = layui.upload;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            //url: '/Common/HonorUpload', // 实际使用时改成您自己的上传接口即可。
            acceptMime: 'image/*', // 筛选所有图片类型
            multiple: true,
            auto: false,
            choose: function (obj) {
                var imgs = $('[id^=imgDiv]');
                var imgLength = imgs.length + obj.resetFile.length;
                if (imgLength > 5) {
                    alert("最多上传5张");
                    return false;
                } else {
                    // 将每次选择的文件追加到文件队列
                    files = obj.pushFile();
                    obj.preview(function (index, file, result) {
                        var idName = "imgDiv";
                        $('#upload-demo-preview').append('<div class="imgDiv" id="' + idName + index + '"><img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;"><div class="handleDiv layui-hide" id="handle' + index + '"><i class="layui-icon iconI" οnclick="removeImg(\'' + idName + index + '\',\'' + index + '\')">&#xe640;</i></div></div>');
                    });
                }
            },
        });
    });

    function uploadImg() {
        if (Object.keys(files).length == 0) {
            alert("请选择图片上传");
            return false;
        }
        var formData = new FormData();
        for (let i in files) {
            formData.append("files", files[i]);
        }

        $.ajax({
            type: 'POST',
            url: "/Common/HonorUpload",
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            dataType: "json",
            success: function (result) {
                if (result.success == true) {
                    var arr = result.imageUrl.split(',');
                    for (let i in files) {
                        delete files[i]; //文件上传成功，删除列表中对应的文件
                        var num = i.split('-')[1];
                        $('#uploadResult').append('<img id="upload' + i + '" src="' + arr[num] + '" style="width: 90px; height: 90px;">');
                    }
                } else {
                    alert("图片上传失败");
                    return false;
                }
            }
        });
    }

    function getUploadSrc() {
        var imgs = $('[id^=upload]');
        var imgArray = [];
        imgs.each(function () {
            var url = $(this).attr('src');
            //滤空
            if (url) {
                imgArray.push(url);
            }
        });
        alert(JSON.stringify(imgArray));
        return false;
    }

    function removeImg(imgDivId, index) {
        delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
        $("#" + imgDivId).remove();
        $("#upload" + index).remove();
        return false;
    }

    function openImg(name) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            layer.photos({
                photos: '#' + name,
                anim: 5
            });
        });
    }
</script>

后端接口

[HttpPost]
        public ActionResult HonorUpload()
        {
            try
            {
                Stream stream;
                string fileName;
                List<string> ImageUrls = new List<string>();
               
                for(var i=0;i<Request.Files.Count;i++)
                {
                    HttpPostedFileBase httpPostedFile = Request.Files[i];
                    if (httpPostedFile == null)
                        throw new ArgumentException("没有选择上传文件");
                    stream = httpPostedFile.InputStream;
                    fileName = Path.GetFileName(httpPostedFile.FileName);
                    var ext = (string.IsNullOrEmpty(fileName) || fileName.IndexOf('.') == -1)
                     ? ""
                     : fileName.Substring(fileName.LastIndexOf('.') + 1).ToLower();

                    var key = "xiang/" + DateTime.Now.ToString("yyyyMMddHHmmss") + new Random().Next(100, 999).ToString("") +
                              "." + ext;
                    var url = Comm.UploadToOss(key, stream);
                    ImageUrls.Add(url);                  
                }
                return Json(new { success = true, imageUrl = string.Join(",",ImageUrls) }, "text/plain");

            }
            catch (Exception ex)
            {
                return Json(new { success = false, error = ex.Message }, "text/plain");
            }
        }