layui 上传文件限制数量优化

最新推荐文章于 2025-04-09 17:44:37 发布

谢泽豪

最新推荐文章于 2025-04-09 17:44:37 发布

阅读量3.4k

点赞数

分类专栏： web前端的笔记文章标签： javascript 前端 layui 文件上传

本文链接：https://blog.youkuaiyun.com/qq_19306197/article/details/123661292

版权

web前端的笔记专栏收录该内容

37 篇文章

订阅专栏

博客讲述了在使用Layui上传组件时遇到的问题，即用户可以超过最大上传数量。作者通过修改代码，在选择文件时进行数量检查，若超过限制则阻止上传，提供了一种无需修改Layui源码的解决方案。文章中提到的关键点包括设置`auto`为`false`以手动控制上传，以及在`choose`回调中实现数量检查和删除多余文件的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务场景：需要用户最多只能上传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){
                //上传完毕
                

            }
        });

就这，多断点打印吧