Javascript

Question

我知道这个问题在这里已经被问过很多次了，但我已经看过这些答案，但无法使我的代码正常工作。我正在使用 Angular 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]);
}

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

Answer 1

您正在将 ProfilePicture 和 InGamePicture 的值设置为等于 conversion() 的 return 值，这永远不会 return 任何东西，所以它们将永远是 undefined。您提供一个您调用的回调，但它实际上什么也不做（returns 从未处理过的参数）。

您需要同步完成两个 FileReader 操作才能继续。如果您只能异步获取结果，那么这听起来像是 Promises 的工作，这是当今处理具有多个异步操作的控制流的首选方式。

Javascript - 从 FileReader 异步 onload 方法获取值

Javascript - get value from FileReader asynchronous onload method

filereader

angular