等待Javascript FileReader完成

Question

这是我的 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但它不起作用，它仍然为空。

Answer 1

根据文档，您可以返回一个承诺以使其等待异步内容。所以你可以做这样的事情（因为

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

来代替 将其包装在 Promise 中，但是

File

对象的

text

方法（继承自

Blob

）更方便。

Answer 2

返回 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
            });
        } 
    });
}

Answer 3

您需要使用 JavaScript Promise 或回调来处理 FileReader 的异步特性。 FileReader API 是异步的，这意味着 onload 事件将在读取文件后调用，但您需要确保仅在读取完成后才发出 post 请求。

 $("#goodsImage").change(function (e) {
    if ($("#goodsImage").val() == "") {
        alert("please choose the image you want to upload");
        return;
    }

    var filepath = $("#goodsImage").val();
    var extStart = filepath.lastIndexOf(".");
    var ext = filepath.substring(extStart, filepath.length).toUpperCase();
    
    if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
        alert("only images could be uploaded");
        return;
    }
    
    readFile(e.target.files[0])
        .then(readerRs => {
            if (readerRs) {
                $.post("@Url.Action('UploadGoodImage')", { localPath: readerRs 
 }, function (e) {
                    if (e) {
                        $("#ImagePreviewUrl").val(e.data);
                    } else {
                        // Handle the error if needed
                    }
                });
            }
        })
        .catch(error => {
            console.error("Error reading file:", error);
        });
   });

    function readFile(file) {
      return new Promise((resolve, reject) => {
        var reader = new FileReader();
        
        reader.onload = function (evt) {
            document.getElementById("hidImageStream").value = evt.target.result;
            resolve(evt.target.result);
        };

        reader.onerror = function (evt) {
            reject("File reading failed");
        };

        reader.readAsText(file);
     });
  }