在使用layui的upload模块上传文件非常方便,但是如果我们想在文件上传前做逻辑判断,比如判断文件的类型,大小,如果不满足系统要求则停止上传,目前是没有对应的方法满足这个功能。
1.关闭自动上传的配置:auto: false,这一步非常关键。
2.在choose()中,如果不执行obj.upload(index, file)就不会上传文件了。
const uploadInst = upload.render({
elem: '#exportBtn',
,url: requestUrlFile + 'upload' //上传接口
,accept: 'file'
,exts: 'doc|docx|xls|xlsx|pat|et|ett|wpt|ofd|ppt|pdf|pptx' //只允许上传压缩文件
,multiple: true
,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等)。