Angular中如何在文件上传函数顶部等待前序文件上传完成？

可以通过两种方式实现需求，确保新的上传任务等待前一次上传完成后再执行：

方式一：轮询等待状态变为false #

在upload函数开头添加等待逻辑，轮询检查this.fileuploaded状态，直到它变为false再继续后续上传：

async upload(files) {
  // 等待前一次上传完成，直到fileuploaded为false
  while (this.fileuploaded) {
    // 每100ms检查一次，避免阻塞事件循环
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  this.fileuploaded = true;
  for(let i = 0; i < files.length; i++){ 
    await new Promise(f => setTimeout(f, 1500)); 
    this.uploadUrl = await this.uploadServerFile(files[i]);
    // ...其他逻辑
  }
}

这种方式直接依赖fileuploaded状态，实现简单，但轮询会存在一定延迟（取决于检查间隔）。

方式二：维护上传任务队列（更可靠） #

如果需要更严谨的串行执行，可以维护一个Promise队列，每次调用upload时将任务加入队列，确保任务按顺序执行，无需依赖状态判断：

// 在类的构造函数或初始化阶段定义队列Promise
uploadQueue = Promise.resolve();

async upload(files) {
  // 将当前上传任务加入队列，等待前一个任务完成
  this.uploadQueue = this.uploadQueue.then(async () => {
    this.fileuploaded = true;
    for(let i = 0; i < files.length; i++){ 
      await new Promise(f => setTimeout(f, 1500)); 
      this.uploadUrl = await this.uploadServerFile(files[i]);
      // ...其他逻辑
    }
  });

  // 等待当前上传任务执行完成
  await this.uploadQueue;
}

如果保留uploadServerFile里的this.fileuploaded=false，队列机制依然能正常工作——前一个任务的fileuploaded会在上传完成后被设为false，同时队列确保了任务串行执行。这种方式避免了轮询延迟，还能保证所有上传任务严格按调用顺序执行，适合频繁触发上传的场景。

内容的提问来源于stack exchange，提问作者user3653474