Swal.fire的preConfirm中FileReader未执行完就返回导致selectedfiles为空如何解决

你遇到的问题本质是FileReader的读取操作属于异步回调逻辑，原代码的同步return语句不会等待回调执行，就返回了还未赋值的selectedfiles变量。
SweetAlert2的preConfirm钩子原生支持返回Promise实例，你只需将文件读取逻辑封装到Promise中，等读取完成/报错后再resolve最终要返回的表单对象即可，Swal会自动等待Promise执行完成再触发后续的确认后逻辑。

修复后代码 #

preConfirm: function () {
    return new Promise((resolve) => {
        let selectedfiles = "";
        const file = $('#files')[0].files[0];
        // 先获取同步读取的表单值
        const email = $('#email').val();
        const header = $('#header').val();
        const content = $('#content').val();

        // 无上传文件场景直接返回结果
        if (!file) {
            resolve({
                email: email,
                header: header,
                content: content,
                selectedfiles: selectedfiles
            });
            return;
        }

        // 有上传文件场景，等待读取完成后返回结果
        const reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            selectedfiles = evt.target.result;
            resolve({
                email: email,
                header: header,
                content: content,
                selectedfiles: selectedfiles
            });
        }
        reader.onerror = function (evt) {
            selectedfiles = "error reading file";
            resolve({
                email: email,
                header: header,
                content: content,
                selectedfiles: selectedfiles
            });
            // 若需要读取错误时终止提交，可替换为以下写法
            // reject("文件读取失败，请重试");
        }
    })
},

优化建议 #

• 搭配Swal的showLoaderOnConfirm: true配置使用，文件读取过程中会自动展示加载动画，避免用户重复操作
• 若需要限制上传文件的大小、格式，可在文件读取前增加对应校验逻辑，不符合要求直接reject即可终止提交流程

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