FileReader无法在TypeScript中运行

Question

我在页面上有多个图像。我想从客户端将图像数据发送到我的服务器端代码。在调用createCategoryTemplate方法时，我得到this.CategoryList的空值，而categoryDetails.image也是空的。

save(): void {
var fileByteArray = '';
var Image;
let j: any;
this.CategoryList = [];
for (j = 0; j < this.form.value.addresses.length; j++) {
    Image = (<HTMLInputElement>document.getElementById(j));

    var fileReader = new FileReader();

    fileReader.onload = (e) => {
        var imageData = fileReader.result;
        var bytes = new Uint8Array(imageData);
        for (var i = 0; i < bytes.length; ++i) {
            fileByteArray += (String.fromCharCode(bytes[i]));
        }

        let categoryDetails = new CategoryDto();
        categoryDetails.categoryName = this.form.value.addresses[j].categoryName;
        categoryDetails.image = btoa(fileByteArray);
        this.CategoryList.push(categoryDetails);
    }

    fileReader.readAsArrayBuffer(Image.files[0]);

}

this._categoryservice.createCategoryTemplate(this.CategoryList).subscribe((result) => {
    this.notify.info(this.l('SavedSuccessfully'));
});

}

当我使用断点逐行运行客户端代码时，它按预期工作。

我认为意外结果背后的原因可能是onload已完成调用readAsArrayBuffer，createCategoryTemplate后会立即调用readAsArrayBuffer。

但是我无法解决，请帮助。