Angular中使用blockBlobClient.uploadData上传大文件至Azure Blob失败

问题分析 #

你遇到的net::ERR_INSUFFICIENT_RESOURCES错误，核心原因是当前代码同时发起所有文件的上传请求，处理13.5GB大文件夹时，浏览器的网络连接数、内存资源被耗尽，导致请求无法发送。另外需要注意：你的SAS URL有效期仅1小时（21:25到22:30），13.5GB上传耗时大概率会超过这个时长，这也可能是后续请求失败的诱因。

修复方案 #

1. 限制并发上传数量 #

不要用forEach一次性发起所有请求，改用RxJS的mergeMap控制并发数，避免浏览器资源过载。示例代码：

import { from, mergeMap, tap } from 'rxjs';

// 限制同时上传的文件数量，根据浏览器性能调整，比如设为3
const CONCURRENT_UPLOADS = 3;

const blobServiceClient = new BlobServiceClient(sasUrl);
const containerClient = blobServiceClient.getContainerClient("");

from(this.selectedFiles).pipe(
  mergeMap(file => {
    const blockBlobClient = containerClient.getBlockBlobClient(file.webkitRelativePath);
    return from(blockBlobClient.uploadData(file, {
      onProgress: (prg) => {
        this.archiveService.setProgressBarValues({
          fileName: file.name,
          bytes: prg.loadedBytes,
          uploadComplete: false
        });
      },
      // 配置分块上传，建议块大小设为4MB（Azure Blob默认块大小上限为4000MB）
      blockSize: 4 * 1024 * 1024
    })).pipe(
      // 上传完成后标记进度
      tap(() => {
        this.archiveService.setProgressBarValues({
          fileName: file.name,
          bytes: file.size,
          uploadComplete: true
        });
      })
    );
  }, CONCURRENT_UPLOADS)
).subscribe({
  next: () => {},
  error: (err) => console.error('上传失败:', err),
  complete: () => console.log('所有文件上传完成')
});

2. 延长SAS URL有效期 #

当前SAS有效期仅1小时，13.5GB上传耗时会超过这个时间，导致后续请求权限失效。生成SAS时将有效期延长至2-3小时以上，匹配大文件上传的预估耗时。

3. 优化内存使用 #

• 移除不必要的file.slice(0, file.size, file.type)，直接传入file即可，uploadData会自动处理分块逻辑
• 通过RxJS管道统一管理上传流，避免保留大量未订阅的Observable引用

4. 确认CORS配置生效（可选） #

虽然你的CORS配置已经很宽松，但可以通过浏览器开发者工具的Network面板查看OPTIONS请求的响应头，确认CORS规则已正确应用，排除浏览器缓存旧规则的可能。

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