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()的返回值的值，该值永远不会返回任何内容，因此它们始终为undefined。你给一个你调用的回调，但它什么都没做（返回从未处理过的参数）。

在继续操作之前，您需要同步完成两个FileReader操作。如果你只能异步获得结果，那么这听起来像Promises的工作，这是目前用多个异步操作处理控制流的首选方式。

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

1 个答案: