layUi 上传多图片问题解决

layUi上传多文件删除后继续上传会将删除前的文件继续上传解决办法：

先看效果页面

html

<div class="layui-input-block layedit-tool-help" style="float: left">
    <div>
        <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image" style="width: 400px;height: 400px">
    </div>
    <div class="layui-form-item" style="margin-top: 20px">
        <div  style="float: left;margin-left:10px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image0"  style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px" class="aaa">
                <button type="button" class="layui-btn layui-btn-xs" id="upload" lay-data="{index:'0'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del0"  style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>

        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image1" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload1" lay-data="{index:'1'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del1" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image2" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload2" lay-data="{index:'2'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del2" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image3" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload3" lay-data="{index:'3'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del3"  style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
        <div style="float: left;margin-left:20px;">
            <div>
                <img src="http://127.0.0.1:8080/usr/local/scmUpload/2018/03/20/0f54f793ce4a467f88a29c08da6ef129.jpg" id="image4" style="width: 60px;height: 60px;cursor:pointer">
            </div>
            <div style="width: 15px">
                <button type="button" class="layui-btn layui-btn-xs " id="upload4" lay-data="{index:'4'}" style="margin-top: 10px;margin-left: 5px">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-xs" id="del4" style="margin-top: 10px;margin-left: 5px;display: none">
                    <i class="layui-icon">&#xe67c;</i>删除
                </button>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width:400px;color: red">
        <span>
            说明：为了商品展示图片的美观性，请注意</br>
            1、图片需为正方形；</br>
            2、建议上传800*800的方图，最小尺寸不得小于450*450；</br>
            3、单张图片大小不可超过2M；
        </span>
    </div>
</div>
           

js实现

function  uploadCommers(id,array) {
    var fileId = "";
    var uploadInst = upload.render({
        elem: '#'+id //绑定元素
        ,url: url_fileUpload+'api/file/fileUpload?bid=&ftype=图片'
        ,auto: true //选择文件后不自动上传
        ,multiple:true
        ,size:100
        // ,bindAction: '#fileAction'
        ,before: function(obj){
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            var index1 =this.index;
            //读取本地文件
            obj.preview(function(index, file, result){
                if(index1 == "0"){
                    var tr =  $("#image").attr("src",result);
                }
                var tr =  $("#image"+index1).attr("src",result);
                $("#"+id).hide();
                $("#del"+index1).show();

                $("#del"+index1).on("click",function () {
                    //请求删除
                    $.ajax({
                        url:url_fileUpload+'api/file/deleteFile',
                        type: "POST",
                        data:{
                            "id":fileId
                        },
                        dataType: "json",
                        success: function(data){
                            if(data.code==0){
                                delete files[index];
                                uploadInst.config.elem.next()[0].value = '';
                                $("#del"+index1).hide();
                                $("#"+id).show();
                                $("#image"+index1).attr("src","../../plugins/layui/images/default.jpg");
                                $(".aaa").load(location.href+" .aaa");
                                form.render();
                                //location.reload();
                            }else{
                                layer.msg(data.msg, {icon: 5});
                            }

                        }
                    });

                });
            });
        }
        ,allDone: function(obj){ //当文件全部被提交后，才触发

        }
        ,done: function(res, index, upload){
            if(res.code == 0) { //上传成功

                fileId = res.data.id;
                array.push(res.data);
                console.log(res.data.id)

            }
        }
        ,error: function(res,index, upload){

        }
    });