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){

        }
    });