[JavaScript知识库]layui 上传文件限制数量优化

业务场景：需要用户最多只能上传4个文件，第一次选择3个文件并上传成功，第二选择3个文件并上传成功，第三次选择3个文件，这时是触发限制数量条件（number）。现在需要解决第二次选择文件时就不能触发上传接口。

在网上搜索出很多解决方案都是改layui源码，我就不太想改。然后看到一篇文章——【使用Layui的upload上传文件在上传之前做逻辑处理并终止上传】受到启发，并优化自己代码。

//多图片上传
      var uploadInst = upload.render({
            elem: '#upload-file',
            url: '', 
            multiple: true,//多文件上传
            auto: false,//重点，不能自动上传，手动调用obj.upload
            // auto: true,
            number:4,
            choose:function (obj) {
                let curFiles = obj.pushFile();
                if (Object.keys(curFiles).length>upload_file_number){
                    layer.msg("超过文件上传限制数量");
                    obj.preview(function(index, file, result){
                        //删除多余的
                        delete curFiles[index] 
                    });

                }else{
                    obj.preview(function(index, file, result){
                        //这里预览图而已，可无视
                        $('#upload-preview').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="200" height="130" style="margin-right: 10px;">')
                        //手动调用文件上传接口
                        obj.upload(index, file);
                    });
                }


            },
            done: function(res){
                //上传完毕
                

            }
        });

就这，多断点打印吧