如何在Ionic+AngularFire2中批量上传文件至Firebase Storage？

嘿，我来帮你搞定批量上传的需求！你现在已经实现了单个文件上传，只需要在此基础上扩展一下，就能实现一次性上传多个文件，或者控制并发数上传指定数量的文件。

第一步：优化单个上传函数 #

先把你现有的单个上传函数封装成返回Promise的形式，这样方便后续批量处理，还能避免同名文件被覆盖：

async uploadSingleFile(name: string, file: string): Promise<firebase.storage.UploadTaskSnapshot> {
  // 给文件名加时间戳，确保唯一性
  const uniqueFileName = `${Date.now()}-${name}`;
  const imgDataUrl = 'data:image/jpg;base64,' + file;
  
  return this.afStorage.ref('/').child(uniqueFileName).putString(imgDataUrl, 'data_url');
}

第二步：一次性上传所有文件（并行上传） #

利用Promise.all可以同时触发所有上传任务，等待全部完成后统一处理结果：

async uploadAllFiles(files: Array<{name: string, file: string}>): Promise<Array<string>> {
  try {
    // 生成所有上传任务的Promise数组
    const uploadPromises = files.map(file => this.uploadSingleFile(file.name, file.file));
    
    // 等待所有上传任务完成
    const uploadSnapshots = await Promise.all(uploadPromises);
    
    // 批量获取每个文件的下载URL
    const downloadUrlPromises = uploadSnapshots.map(snapshot => snapshot.ref.getDownloadURL());
    const downloadUrls = await Promise.all(downloadUrlPromises);
    
    console.log('所有文件上传完成，下载URL:', downloadUrls);
    return downloadUrls;
  } catch (err) {
    console.error('批量上传失败:', err);
    throw err; // 抛出错误让调用方处理
  }
}

调用方式很简单，比如你有一个选中的文件数组selectedFiles：

this.uploadAllFiles(selectedFiles)
  .then(urls => {
    // 这里可以把URL存到Firestore或者其他业务需要的地方
  })
  .catch(err => {
    // 处理上传错误，比如给用户提示
  });

第三步：控制并发数（一次上传X个文件） #

如果担心同时上传太多文件导致性能问题，可以限制一次上传的数量，分批次处理：

async uploadFilesInBatches(files: Array<{name: string, file: string}>, batchSize: number): Promise<Array<string>> {
  const allDownloadUrls: Array<string> = [];
  
  try {
    // 分批次循环处理
    for (let i = 0; i < files.length; i += batchSize) {
      // 截取当前批次的文件
      const currentBatch = files.slice(i, i + batchSize);
      
      // 上传当前批次的文件
      const batchPromises = currentBatch.map(file => this.uploadSingleFile(file.name, file.file));
      const batchSnapshots = await Promise.all(batchPromises);
      
      // 获取当前批次的下载URL
      const batchUrlPromises = batchSnapshots.map(snapshot => snapshot.ref.getDownloadURL());
      const batchUrls = await Promise.all(batchUrlPromises);
      
      allDownloadUrls.push(...batchUrls);
      console.log(`已完成第${Math.floor(i/batchSize)+1}批上传，共${allDownloadUrls.length}个文件`);
    }
    
    console.log('所有批次上传完成，总下载URL:', allDownloadUrls);
    return allDownloadUrls;
  } catch (err) {
    console.error('分批次上传失败:', err);
    throw err;
  }
}

调用时指定批次大小（比如一次传3个）：

this.uploadFilesInBatches(selectedFiles, 3)
  .then(urls => {
    // 后续业务逻辑
  })
  .catch(err => {
    // 错误处理
  });

额外加分：监听上传进度 #

如果需要给用户展示上传进度，可以修改单个上传函数返回UploadTask，然后监听进度：

uploadSingleFileWithProgress(name: string, file: string): firebase.storage.UploadTask {
  const uniqueFileName = `${Date.now()}-${name}`;
  const imgDataUrl = 'data:image/jpg;base64,' + file;
  
  const task = this.afStorage.ref('/').child(uniqueFileName).putString(imgDataUrl, 'data_url');
  
  // 监听上传进度，可同步到UI
  task.percentageChanges().subscribe(percent => {
    console.log(`文件${name}上传进度: ${Math.round(percent || 0)}%`);
    // 这里可以把进度更新到页面的进度条组件中
  });
  
  return task;
}

这样在批量上传时，每个文件的进度都能单独监听啦！

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