如何用React和Node.js（服务端）向Blob Storage上传200MB+大文件且不存服务器

核心流程（对应 AWS Multipart Upload 逻辑） #

• 初始化分片上传：创建Blob客户端，准备分片上传会话
• 上传分片（Chunk）：逐个上传文件分片，记录每个分片的ID
• 完成分片上传：提交所有分片ID，合并成完整文件

实现步骤 #

1. 安装依赖

npm install @azure/storage-blob

2. 初始化分片上传

从后端获取Blob SAS URL（前端禁止直接使用存储账户密钥，防止泄露），通过该URL创建BlockBlobClient实例：

import { BlockBlobClient } from "@azure/storage-blob";

// 从后端获取的带上传权限的Blob SAS URL
const sasUrl = "YOUR_BLOB_SAS_URL";
const blockBlobClient = new BlockBlobClient(sasUrl);

// 初始化分片ID列表，用于记录所有成功上传的分片
const blockIds = [];

3. 上传单个分片

将文件分割为固定大小的分片（推荐10MB），逐个上传：

async function uploadChunk(file, start, end, chunkIndex) {
  const chunk = file.slice(start, end);
  // 生成Base64编码的唯一分片ID
  const blockId = btoa(`block-${chunkIndex}`);
  // 上传分片到Blob存储
  await blockBlobClient.stageBlock(blockId, chunk);
  blockIds.push(blockId);
}

// 示例：分割文件并批量上传
const file = document.getElementById("file-input").files[0];
const chunkSize = 10 * 1024 * 1024; // 10MB分片大小
const totalChunks = Math.ceil(file.size / chunkSize);

for (let i = 0; i < totalChunks; i++) {
  const start = i * chunkSize;
  const end = Math.min(start + chunkSize, file.size);
  await uploadChunk(file, start, end, i);
}

4. 完成分片上传

所有分片上传成功后，提交分片列表合并为完整文件：

async function completeUpload() {
  await blockBlobClient.commitBlockList(blockIds);
  console.log("文件上传完成！");
}

// 触发完成上传操作
await completeUpload();

关键注意事项 #

• 分片限制：Azure Blob单个分片最大支持100MB，总分片数最多50000个
• SAS URL权限：确保SAS URL包含w（写入）权限，且有效期覆盖整个上传周期
• 断点续传：可通过blockBlobClient.getBlockList()获取已上传的分片ID，跳过重复上传
• 错误处理：分片上传失败时需加入重试逻辑，避免丢失上传进度

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