如何为异步模式下的Kendo UI Upload组件添加自定义预上传事件

核心思路是通过自定义状态标记控制校验逻辑的执行次数，结合Upload组件原生事件实现需求，具体实现如下：

实现步骤 #

• 定义作用域内的校验状态标记isPreCheckPassed，初始值为false，用于标识前置校验是否完成且通过
• 监听Upload组件的upload事件，该事件触发时优先判断校验状态：
  • 状态为false时先阻止默认上传行为，执行自定义前置校验逻辑（权限校验、业务逻辑校验均可）
  • 校验返回true时，修改状态标记为true，手动调用组件的upload()方法触发批量上传，此时二次进入upload事件会直接走正常上传流程
  • 校验返回false时，直接展示错误提示，按需选择是否清空已选文件，同时重置校验状态避免后续操作异常
• 在上传完成、清空文件的对应回调中重置校验状态，保证下一次上传操作逻辑正常

代码示例 #

// 前置校验状态标记
let isPreCheckPassed = false;

// 初始化Kendo Upload组件
$("#upload").kendoUpload({
    async: {
        saveUrl: "你的文件上传接口地址",
        autoUpload: false
    },
    // 每个文件上传前触发的事件
    upload: function(e) {
        if (!isPreCheckPassed) {
            // 阻止默认上传行为
            e.preventDefault();
            
            // 执行自定义前置校验逻辑，返回true/false
            const checkPassed = customPreCheck();
            
            if (checkPassed) {
                isPreCheckPassed = true;
                // 手动触发上传
                e.sender.upload();
            } else {
                kendo.alert("无上传权限或校验未通过，请确认后重试");
                // 可选：清空已选文件
                // e.sender.clearAllFiles();
                // 重置校验状态
                isPreCheckPassed = false;
            }
            return;
        }
        // 校验通过后，正常处理单个文件的上传逻辑，比如添加自定义参数、文件大小校验等
        console.log("上传文件：", e.files[0].name);
    },
    // 所有文件上传完成后重置状态
    complete: function() {
        isPreCheckPassed = false;
    },
    // 清空已选文件时重置状态
    clear: function() {
        isPreCheckPassed = false;
    }
});

// 自定义校验函数示例
function customPreCheck() {
    // 此处替换为实际的权限校验、业务逻辑校验代码
    const hasPermission = true; // 模拟校验结果
    return hasPermission;
}

异步校验适配说明 #

如果你的前置校验需要调用后端接口异步执行，将upload事件回调改为异步函数即可，示例如下：

upload: async function(e) {
    if (!isPreCheckPassed) {
        e.preventDefault();
        // 调用后端接口校验权限
        const res = await fetch("/api/check-upload-perm").then(resp => resp.json());
        if (res.permAllowed) {
            isPreCheckPassed = true;
            e.sender.upload();
        } else {
            kendo.alert(res.errorMsg);
            isPreCheckPassed = false;
        }
        return;
    }
    // 正常上传逻辑
}

内容的提问来源于stack exchange，提问作者user3323436