Angular上传API报错：Unexpected token ')'，文件列表无法即时刷新

问题描述 #

在Angular应用中编写的文件上传函数报错 ERROR SyntaxError: Unexpected token ')'，文件上传成功后文件列表无法即时刷新（需手动刷新页面），即使移除刷新列表的代码，错误依然存在。而逻辑类似的删除函数可正常工作。

上传函数代码：

async upload(file: FileToUpload) { // this is where the error occurs
  file.id = UUID.UUID();

  this.delegates.fileManager.uploadFile(file).subscribe({
    next: async () => {
      this.files = await (await this.delegates.fileManager.getFilesAsync()).files;
      console.log(this.files);
    }
  });
}

删除函数代码：

async deleteFile(file: FileToUpload) {
  this.delegates.fileManager.deleteFileById(file.id).subscribe({
    next: async () => {
      this.files = await (await this.delegates.fileManager.getFilesAsync()).files;
    }
  })
}

可能的原因与解决步骤 #

1. 语法错误根源：UUID调用写法问题 #

报错提示的Unexpected token ')'大概率出自UUID.UUID()这一行。如果使用的是主流uuid库，正确调用方式并非UUID.UUID()：

• 先导入对应版本的UUID生成方法：

  import { v4 as uuidv4 } from 'uuid';
  

• 替换生成ID的代码：

  file.id = uuidv4();
  

若使用自定义UUID工具类，需检查UUID对象及UUID()方法的定义，确保语法调用合规。

2. 优化异步逻辑，解决列表不刷新问题 #

当前在Observable的subscribe回调中嵌套async/await易导致逻辑混乱，更规范的做法是将Observable转换为Promise，确保操作顺序执行：

async upload(file: FileToUpload) {
  file.id = uuidv4(); // 替换为正确的UUID生成方式

  try {
    // 等待上传操作完成
    await firstValueFrom(this.delegates.fileManager.uploadFile(file));
    // 获取最新文件列表并更新视图
    const fileResponse = await this.delegates.fileManager.getFilesAsync();
    this.files = fileResponse.files;
    console.log(this.files);
  } catch (error) {
    console.error('操作失败:', error);
  }
}

需要提前导入firstValueFrom：

import { firstValueFrom } from 'rxjs';

3. 手动触发变更检测（可选） #

若更新this.files后视图仍未刷新，可手动触发Angular变更检测：

• 导入ChangeDetectorRef：

  import { ChangeDetectorRef } from '@angular/core';
  

• 在组件构造函数中注入：

  constructor(private cdr: ChangeDetectorRef) {}
  

• 更新文件列表后调用：

  this.files = fileResponse.files;
  this.cdr.markForCheck();
  

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