layui文件上传组件upload控制上传图片数量

业务场景： 多文件上传预览图，最多可上传五张图片，在使用layui的upload上传组件时，before方法进行判断图片的数量，但是发现return false 并不会阻止文件上传，如下图所示 百度发现大都是一些修改源码的方法，今天介绍下通过delete files[index] 将文件从队列中删掉，即可达到阻止上传的效果 代码如下：

  upload.render({
            elem: '#test-upload-more'
            ,url: api+'/sys/file/uploadList'
            ,data:{
                "type":"service",
                "aConnectionId":$("#aConnectionId").val(),
            }
            , multiple: true
            ,accept: 'images'
            ,number: 5
            ,before: function (obj) {
               files = obj.pushFile();
                $.each(files, function (indexs, file) {
                    var number = $('.el-upload--picture-card-myStyle').length;
                    var file_siez = file['size'];
                    var file_name = file['name'];
                    if (number >= 5) {
                        layer.msg("最多只允许上传五张营业执照", {time: 1000});
                        return delete files[indexs];
                    }else if (file_siez>10485760){//大于10M
                        file_name_arr.push(file_name);
                        layer.msg("所选文件"+file_name_arr+"大于10M，此文件上传失败", {time: 2000});
                        return delete files[indexs];
                    }else{
                        var index=indexs.replace(/-/, "0");
                        $('#test-upload-more-list').append('<div class="el-upload--picture-card-myStyle" id="remove_' + index + '"><div class="handle" id="handle_' + index + '"> <i class="layui-icon" style="margin-right: 30%;color: #FF5722;font-size: 20px;" id="del_' + index + '">&#xe640;</i><i class="layui-icon" style="color: #FF5722;margin-right: 20%;font-size: 19px;" id="search_' + index + '"  onclick="showPic('+index+')">&#xe615;</i></div><img   id="id_' + index + '" alt="' + file.name + '"     style="height: 100px;width: 100px"></div>')
                        $('#remove_' + index).bind('mouseover', function () {
                            $("#handle_" + index).css("display", "block");
                        });
                        $('#remove_' + index).bind('mouseout', function () {
                            $("#handle_" + index).css("display", "none");
                        });
                        layui.form.render();
                    }
                });
                return true;
            }, 
            done: function (res, indexs, upload) {
                var index=indexs.replace(/-/, "0");
                $("#id_"+index).attr('src', imgUrl+res.data[0]);
                var uri = $("input[name='sfCertificate']").val();
                if(uri!="" && uri!=undefined && uri!=null ) {
                    var  arr = uri.split( ',' );
                }else{
                    var arr=[];
                }
                arr.push(res.data[0]);
                if(arr.length>5){
                    arr=arr.slice(0,5)
                }
                $("input[name='sfCertificate']").val(arr);
                $('#del_' + index).bind('click', function () {
                    $.ajax({
                        url: api+'/sys/file/del',
                        data:{
                            "url":res.data[0]
                        },
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            var indexs = arr.indexOf(res.data[0]);
                            arr.splice(indexs, 1);
                            console.log("删除"+arr);
                            $("input[name='sfCertificate']").val(arr);
                            $('#remove_' + index).remove();
                            layui.form.render();
                        }
                    });
                });
                delete files[indexs];
            }
        });

主要代码在before中

这样就可以实现控制上传数量，文件大小等。