等待 Javascript FileReader 完成答案

【问题标题】：Wait for Javascript FileReader is finished等待 Javascript FileReader 完成
【发布时间】：2021-10-08 18:09:15
【问题描述】：

这是我在 Swal.fire preConfirm 中的代码：

  preConfirm:  function () {

                    var selectedfiles = "";
                    var file =  $('#files')[0].files[0];

                         if (file) {
                            var reader = new FileReader();
                            reader.readAsText(file, "UTF-8");
                            reader.onload = function (evt) {
                                selectedfiles = evt.target.result;
                            }
                            reader.onerror = function (evt) {
                                selectedfiles = "error reading file";
                            }
                        }

                    var email = $('#email').val();
                    var header = $('#header').val();
                    var content = $('#content').val();

                          return {
                              'email': email,
                              'header': header,
                              'content': content,
                              'selectedfiles': selectedfiles
                          };


                },

问题是我的返回不等待 FileReader，并且selectedfiles 为空。

我尝试了https://stackoverflow.com/a/17491515/13629479，但它不起作用，它仍然为空。

【问题讨论】：

selectedFiles 真的是null 还是只是一个空字符串？ null 表示文件有问题。

标签： javascript

【解决方案1】：

返回 Promise 以便 Swal 解决它怎么样？

preConfirm: function() {
    return new Promise((resolve, reject) => {
        var selectedfiles = null;

        var email = $('#email').val();
        var header = $('#header').val();
        var content = $('#content').val();
        var file =  $('#files')[0].files[0];

        if (file) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = function (evt) {
                resolve({
                    'email': email,
                    'header': header,
                    'content': content,
                    'selectedfiles': evt.target.result
                });
            }
            reader.onerror = function (evt) {
                reject("error reading file");
            }
        } else {
            resolve({
                'email': email,
                'header': header,
                'content': content,
                'selectedfiles': null
            });
        } 
    });
}

【讨论】：

【解决方案2】：

根据the documentation，你可以返回一个promise，让它等待一些异步的东西。所以你可以做这样的事情（因为async 函数返回承诺）：

preConfirm:  async function () {
    const file = $('#files')[0].files[0];
    // The `text` method returns a promise for the text of the file
    const selectedfiles = file ? await file.text() : "";
    const email = $('#email').val();
    const header = $('#header').val();
    const content = $('#content').val();
    return {
        email,
        header,
        content,
        selectedfiles,
    };
},

您可以使用FileReader 代替wrapping it in a promise，但File 对象的text method（继承自Blob）更方便。

【讨论】：