Javascript-从FileReader异步加载方法获取值

我知道这个问题在这里已经被问过很多次了，但我已经看过了这些答案，无法让我的代码正常工作。我用的是角度2。 我有文件插入的输入标签。文件到达组件，但当我将其转换为数组缓冲区并尝试将其设置为变量时，我的变量仍然未定义。我试图实现回调，但我认为我做得不对

这是我的密码：

addPlayer() {
    var nationality = document.getElementById("nationality") as HTMLSelectElement;
    var position = document.getElementById("position") as HTMLSelectElement;
    var shirtnmbr = document.getElementById("shirtnmbr") as HTMLSelectElement;
    var profilePicture = document.getElementById("profilepic") as HTMLSelectElement;
    var inGamePicture = document.getElementById("detailspic") as HTMLSelectElement;
    var player = {
        Club_ID: this.clubId,
        Name: this.capitalization(this.addForm.get("name").value),
        Surname: this.capitalization(this.addForm.get("surname").value),
        Height: this.addForm.get("height").value,
        Weight: this.addForm.get("weight").value,
        BirthDate: this.addForm.get("birthdate").value.formatted,
        Nationality: this.nationalities[nationality.selectedIndex],
        Position: this.order[position.selectedIndex],
        Shirtnmbr: this.shirtNumbers[shirtnmbr.selectedIndex],
        ProfilePicture: this.conversion(profilePicture, function (res) {
            return res;
        }),
        InGamePicture: this.conversion(inGamePicture, function (res) {
            return res;
        })
    };
    console.log(player);  
}

capitalization(str) {
    return str.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
}

conversion(element, callback) {
    var file = element.files;
    var result;
    var fileReader = new FileReader();
    fileReader.onload = function () {
        result = fileReader.result;
        callback(result);
    };
    fileReader.readAsArrayBuffer(file[0]);
}

---

当我记录player时，除ProfilePicture和InGamePicture（它们未定义）外，每个属性都有值。之后，我计划将该播放器发送到数据库，但目前我无法这样做，因为http.post将在ProfilePicture和InGamePicture属性获取值之前运行。

您正在将

ProfilePicture

和

InGamePicture

设置为与

conversion（）

的返回值相等的值，它从不返回任何内容，因此它们将始终是未定义的。您给出了一个调用的回调，但实际上它什么也不做（返回从未处理过的参数）

---

在继续之前，您需要同步完成这两个

文件读取器

操作。如果您只能异步获得结果，那么这听起来像是一项工作，这是当今处理具有多个异步操作的控制流的首选方式。

您正在将

ProfilePicture

和

ingamecture

的值设置为等于

conversion（）

的返回值，它从不返回任何内容，因此它们将始终是未定义的。您给出了一个调用的回调，但实际上它什么也不做（返回从未处理过的参数）

---

在继续之前，您需要同步完成这两个

文件读取器

操作。如果您只能异步获得结果，那么这听起来像是一项工作，这是当今处理具有多个异步操作的控制流的首选方式。

我想，在将数据发送到HTTP之前，您需要确保两次回调都已完成？同样只是一个建议，你应该使用承诺，或者因为使用Angular 2，那么你应该使用RXJS而不是回调。@LiverpoolOwen你能提供一个例子吗？我想你需要确保在将数据发送到HTTP之前，两次回调都已完成？还有一个建议，你应该使用承诺，或者因为使用Angular 2，那么你应该使用RXJS而不是回调。@LiverpoolOwen，你能举个例子说明我如何做到这一点吗？不，不能？它设置一个调用回调的onload，回调只返回给定的参数，然后立即丢弃结果（只运行

callback（result）

表达式，不存储，因此其返回值将被丢弃）。所有这些都是异步的。

onload

设置不会阻止程序流，函数将立即返回（返回值

未定义）。这正是我面临的问题。我不知道如何解决这个问题。如我所说，如果不深入研究，按照承诺重构控制流可能会实现您想要的。请参阅类似的问题。我正在查看该示例，但不知道它是如何工作的。确切地说，我不知道如何在代码中实现承诺。@jlaitio您能告诉我如何存储回调（result）以从该函数获取返回值吗？我不熟悉承诺。不，不熟悉？它设置一个调用回调的onload，回调只返回给定的参数，然后立即丢弃结果（只运行
callback（result）
表达式，不存储，因此其返回值将被丢弃）。所有这些都是异步的。
onload
设置不会阻止程序流，函数将立即返回（返回值
未定义）。这正是我面临的问题。我不知道如何解决这个问题。如我所说，如果不深入研究，按照承诺重构控制流可能会实现您想要的。请参阅类似的问题。我正在查看该示例，但不知道它是如何工作的。确切地说，我不知道如何在代码中实现承诺。@jlaitio您能告诉我如何存储回调（result）以从该函数获取返回值吗？我不熟悉承诺。