Typescript 如何在最后一步之前异步所有上载的文件？

我希望用户上传多个图像文件，应用程序读取所有图像文件并将其推入一个数组，当所有图像文件都完成后，

lastStep（）

但是

lastStep（）

始终在

之前为。。。的

循环，结果它在空的

数组缩略图[]

上工作。以下

async/await

产生相同的结果：

fileChangedEvent(event: any): void
{
    async() => {
    for (let f of event.target.files)
        {
            var reader = new FileReader();
            await reader.readAsDataURL(f);
            await reader.onload= (event) => {this.arrayThumbnail.push(event.target.result);}; 
        } 
        // when all done
        lastStep();  // work on arrayThumbnail[]
    }
}
    

明确的

承诺

也不起作用：

myPromise(fs: any): Promise<number>
{
    var bogus = new Promise<number>((resolve, reject) =>
    {
        for (let f of fs)
        {
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.onload= (event) => {this.arrayThumbnail.push(event.target.result);};    
        };
        resolve(1);
    })
    return bogus;
}

fileChangedEvent(event: any): void
{
    this.myPromise(event.target.files).then(
    x=>
    {
        lastStep();
    });
}

myPromise（fs:any）：Promise
{
var虚假=新承诺（（解决、拒绝）=>
{
for（设f/fs）
{
var reader=new FileReader（）；
reader.readAsDataURL（f）；
reader.onload=（event）=>{this.arrayThumbnail.push（event.target.result）；}；
};
决议（1）；
})
退货假；
}
fileChangedEvent（事件：任意）：无效
{
这是.myPromise（event.target.files）(
x=>
{
最后一步（）；
});
}

你使用承诺的想法是正确的，你只需要稍微改变一下。运行下面的代码段并选择两个小文件进行测试

//onChange侦听器
函数onChange（事件）{
常量承诺=[]
for（event.target.files的常量文件）
promises.push（readFile（文件））
承诺。所有（承诺）。然后（最后一步）
}
//读取一个文件
函数读取文件（f）{
返回新承诺（（解决、拒绝）=>{
const reader=new FileReader（）
reader.readAsDataURL（f）
reader.onload=event=>resolve（event.target.result）
reader.onerror=拒绝
})
}
//最后一步示例
函数lastStep（数据）{
console.log（“最后一步”）
console.log（`upload${data.length}文件`）
for（数据的常量块）{
const pre=document.createElement（“pre”）
pre.textContent=blob
document.body.appendChild（pre）
}
}
document.forms.myapp.files.addEventListener（“change”，onChange）

哇，很好的例子和简单易懂的语言！再想一想，我们在这里做的是每个文件都有一个

承诺

，然后等待所有问题解决。是否可以对所有文件执行一个承诺？您可以，但不值得添加协调所有单个

onload

回调的机制。承诺的好处是它们重量轻且可组合，这意味着您可以用较小的异步计算构建较大的异步计算。编写回调更具挑战性，因此更容易犯常见错误。我可以包括一个使用单一承诺的演示，这样您就可以看到它。我将很快完成这项工作：D@Jeb50我更新我的答案以解决这个问题。我希望证明，使用承诺以外的东西会带来更多的麻烦。如果您有任何后续问题，我很乐意为您提供帮助！这是一个奇妙的说明和解释。非常感谢。

myPromise(fs: any): Promise<number>
{
    var bogus = new Promise<number>((resolve, reject) =>
    {
        for (let f of fs)
        {
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.onload= (event) => {this.arrayThumbnail.push(event.target.result);};    
        };
        resolve(1);
    })
    return bogus;
}

fileChangedEvent(event: any): void
{
    this.myPromise(event.target.files).then(
    x=>
    {
        lastStep();
    });
}