如何扩展JavaScript代码实现Azure Blob Storage多文件批量上传

Hey there! 我之前也用过Gaurav Mantri的Azure Blob上传代码，要改成批量上传其实没那么复杂，我给你一步步拆解操作，就算JS经验不多也能跟着做：

1. 先改HTML的文件选择器 #

首先得让用户能一次选多个文件，把原来的单文件选择框改成支持多选的：

<input type="file" id="fileInput" multiple>

这样用户按住Ctrl（Windows）或Cmd（Mac）就能选多个文件了。

2. 调整JS获取文件的逻辑 #

原来的代码应该是取files[0]（第一个选中的文件），现在要改成获取所有选中的文件数组：

const fileInput = document.getElementById('fileInput');
const selectedFiles = fileInput.files; // 这是一个FileList对象，包含所有选中的文件

3. 核心：循环处理每个文件上传 #

接下来要遍历所有选中的文件，对每个文件执行原来的上传逻辑。这里给你两种常用的上传方式，按需选择：

方式一：顺序上传（一个接一个传） #

适合文件数量不多，或者需要保证上传顺序的场景，用async/await实现，逻辑更清晰：

// 批量上传入口函数
async function startBatchUpload() {
  const fileInput = document.getElementById('fileInput');
  const selectedFiles = fileInput.files;

  // 遍历每个文件，逐个上传
  for (const file of selectedFiles) {
    try {
      // 调用封装好的单文件上传函数
      await uploadSingleFileToBlob(file);
      console.log(`✅ 文件 ${file.name} 上传成功`);
      // 这里可以更新页面提示，比如给文件加个成功标记
    } catch (error) {
      console.error(`❌ 文件 ${file.name} 上传失败:`, error);
      // 页面提示上传失败
    }
  }
}

// 把原来Gaurav的单文件上传逻辑封装成异步函数
async function uploadSingleFileToBlob(file) {
  // 替换成你的Blob服务配置
  const blobService = AzureStorage.Blob.createBlobServiceWithSas('你的Blob存储URL', '你的SAS令牌');
  const containerName = '你的容器名';

  return new Promise((resolve, reject) => {
    blobService.createBlockBlobFromBrowserFile(containerName, file.name, file, {
      blockSize: 4 * 1024 * 1024, // 4MB分块大小，可根据需求调整
    }, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

方式二：并发上传（同时传多个） #

如果文件数量多，想提高上传速度，可以用并发上传，但要注意控制并发数（避免浏览器或Azure限流），比如同时传3个：

async function startConcurrentUpload(maxConcurrency = 3) {
  const fileInput = document.getElementById('fileInput');
  // 把FileList转成普通数组，方便处理
  const selectedFiles = Array.from(fileInput.files);

  // 单个文件的上传处理函数
  async function processFile(file) {
    try {
      await uploadSingleFileToBlob(file);
      console.log(`✅ 文件 ${file.name} 上传成功`);
    } catch (error) {
      console.error(`❌ 文件 ${file.name} 上传失败:`, error);
    }
  }

  let activeUploads = [];
  for (const file of selectedFiles) {
    activeUploads.push(processFile(file));
    // 当并发数达到上限，等其中一个上传完成再继续
    if (activeUploads.length >= maxConcurrency) {
      await Promise.race(activeUploads);
      // 移除已经完成的上传任务
      activeUploads = activeUploads.filter(p => p.status !== 'fulfilled');
    }
  }
  // 等待所有剩余的上传任务完成
  await Promise.allSettled(activeUploads);
  console.log('📊 所有文件上传任务已结束');
}

4. 可选：添加上传进度提示 #

如果想给用户显示每个文件的上传进度，可以在上传函数里加进度监听：

async function uploadSingleFileToBlob(file) {
  const blobService = AzureStorage.Blob.createBlobServiceWithSas('你的Blob存储URL', '你的SAS令牌');
  const containerName = '你的容器名';

  return new Promise((resolve, reject) => {
    blobService.createBlockBlobFromBrowserFile(containerName, file.name, file, {
      blockSize: 4 * 1024 * 1024,
    }, (error, result) => {
      if (error) reject(error);
      else resolve(result);
    }, (progressEvent) => {
      // 计算上传进度百分比
      const progressPercent = (progressEvent.loaded / progressEvent.total) * 100;
      console.log(`📈 文件 ${file.name} 上传进度: ${progressPercent.toFixed(2)}%`);
      // 这里可以更新页面上的进度条元素，比如：
      // document.getElementById(`${file.name}-progress`).style.width = `${progressPercent}%`;
    });
  });
}

5. 错误处理小技巧 #

批量上传时，单个文件失败不要中断整个流程，用try/catch或者Promise.allSettled来捕获错误，最后可以汇总成功和失败的文件，给用户一个清晰的结果。

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