使用Layui的upload上传文件在上传之前做逻辑处理并终止上传

在使用layui的upload模块上传文件非常方便,但是如果我们想在文件上传前做逻辑判断,比如判断文件的类型,大小,如果不满足系统要求则停止上传,目前是没有对应的方法满足这个功能。

在网上搜索对应的解决方案,大多都是修改源代码:
upload.js中找到:

y = function() {
           if ("choose" !== t && !l.auto || (l.choose && l.choose(g), "choose" !== t)) return l.before && l.before(g),
            a.ie ? a.ie > 9 ? u() : c() : void u()
        };

然后用以下内容替换括号中的代码:

return "choose" === t ? l.choose && l.choose(g) : ((l.before && l.before(g)) === false ? '' : a.ie ? a.ie > 9 ? u() : c() : void u())

然后在bofore()中使用return false就可以中断上传。

但是,这样的解决方案可能导致可以正常上传的文件也不能正常上传,所以不推荐使用

另外还有一种解决方案是在before()中加入layer.stopPropagation();就能中断上传,但是使用的时候提示layer.stopPropagation() is not a function。也不推荐使用

那么正确的方法应该是怎样的呢,其实很简单:

  1. 关闭自动上传的配置:auto: false,这一步非常关键。
  2. choose()中,如果不执行obj.upload(index, file)就不会上传文件了。

推荐使用这个方法。


另外,可能很多同学在开发过程中会出现不是每一次上传都会进入choose()方法,也就不能进行判断是否上传的校验,解决办法是:

choose()中,新增uploadInst.config.elem.next()[0].value = '';

完整代码如下:

const uploadInst = upload.render({
            elem: '#exportBtn',
            url: config.base_server,
            accept: 'file',
            exts: 'xls|xlsx|XLS|XLS',
            auto: false,
            choose: function (obj) {
                uploadInst.config.elem.next()[0].value = '';
                obj.preview(function (index, file) {
                    obj.upload(index, file)
                });
            },
            before: function (obj) {
                layer.load(2);
            },
            done: function (res) {
                layer.closeAll('loading');
                layer.msg("上传成功", {icon: 1});
            },
            error: function () {
                layer.closeAll('loading');
                layer.msg("上传失败", {icon: 2});
            }
        });

在upload模块中有几个回调方法:

  1. choose():选择文件的回调,在文件被选择后触发,该回调会在 before 回调之前。一般用于非自动上传(即 auto: false )的场景,比如预览图片等。
  2. before(): 文件上传前的回调,在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。
  3. done():上传成功的回调,在上传接口请求完毕后触发,但文件不一定是上传成功的,只是接口的响应状态正常(200)。
  4. error():上传失败的回调,当请求上传时出现异常时触发(如网络异常、404/500等)。

版权声明:本文为wuyu7448原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。