在使用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。也不推荐使用。
那么正确的方法应该是怎样的呢,其实很简单:
- 关闭自动上传的配置:
auto: false,这一步非常关键。 - 在
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模块中有几个回调方法:
choose():选择文件的回调,在文件被选择后触发,该回调会在 before 回调之前。一般用于非自动上传(即 auto: false )的场景,比如预览图片等。before(): 文件上传前的回调,在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。done():上传成功的回调,在上传接口请求完毕后触发,但文件不一定是上传成功的,只是接口的响应状态正常(200)。error():上传失败的回调,当请求上传时出现异常时触发(如网络异常、404/500等)。
版权声明:本文为wuyu7448原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。