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

最新推荐文章于 2023-04-29 09:45:39 发布

Hello.鑫

最新推荐文章于 2023-04-29 09:45:39 发布

阅读量2.7k

点赞数

分类专栏： html 文章标签： layui upload choose

本文链接：https://blog.csdn.net/weixin_44037153/article/details/125448692

版权

html 专栏收录该内容

67 篇文章 5 订阅

订阅专栏

本文介绍了如何在layui的upload模块中实现文件上传前的逻辑判断，例如检查文件类型和大小。关键步骤包括设置`auto:false`以关闭自动上传，然后在`choose`回调中控制是否执行上传操作。通过`before`回调可以进行上传前的额外处理，如加载提示。当条件不满足时，阻止`obj.upload()`即可停止上传。此外，还详细列举了upload模块的几个关键回调函数及其应用场景。

摘要由CSDN通过智能技术生成

在使用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等）。