多文件上传场景下使用for循环校验文件大小失效问题求助

错误原因 #

• 取值错误：代码中pdfFile = event.target.files[0]取到的是单个文件对象，不是全部上传文件的集合，它没有length属性，for循环判断条件永远不成立，循环不会执行。
• 逻辑颠倒：当前代码是文件大小超过5MB时才执行读取和弹窗，和你要实现的「超限制拦截」需求完全相反。
• 实例复用问题：只初始化了一个FileReader实例，循环中重复绑定监听、调用读取方法，会导致之前的读取任务被覆盖，就算循环能运行也只会处理最后一个文件。
• 闭包陷阱：用var声明迭代变量i，异步的load回调执行时i已经是循环结束的最终值，拿不到正确的当前文件。
• 传参错误：reader.readAsDataURL传的是pdfFile，不是遍历到的单个文件对象，读取的文件对象不对。
• 语法错误：代码末尾多了两个多余的闭合标签});，会直接触发语法报错。

修复后代码 #

processFileAttachment: function (event) {
    const self = this;
    // 取全部上传文件集合
    const pdfFiles = event.target.files;
    // 遍历所有文件
    for (let i = 0; i < pdfFiles.length; i++) {
        const currentFile = pdfFiles[i];
        // 大小超限制直接拦截
        if (currentFile.size > 5 * 1024 * 1024) {
            alert("单个文件大小不能超过5MB");
            continue;
        }
        // 每个文件生成独立的FileReader实例
        const reader = new FileReader();
        reader.addEventListener('load', function () {
            const fileAttachment = {
                name: currentFile.name,
                contents: reader.result
            };
            self.options.fileModel.set('so_attachment', fileAttachment);
            // 可在此处添加上传成功后的业务逻辑
        });
        reader.readAsDataURL(currentFile);
    }
}

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