Azure Storage JavaScript库Preview 15浏览器端使用问题咨询

这个问题核心在于Preview 15属于Azure Storage JS SDK的v12全新架构版本，和你之前依赖的v2版本（包含azure-storage.common.js的旧版本）API设计完全重构，不存在向后兼容，所以才会出现AzureStorage未定义和createBlobServiceWithSas未定义的报错。下面是具体的迁移和使用方法：

1. 理解版本差异 #

• 旧版本（比如Preview 14）属于v2 SDK，依赖全局AzureStorage对象，提供createBlobServiceWithSas这类传统回调式方法，通过azure-storage.common.js等文件引入。
• Preview 15是v12 SDK的预览版，完全重写了API，不再有全局AzureStorage对象，移除了v2的所有旧方法，改用基于Promise的现代异步API。

2. Preview 15的正确引入方式 #

在浏览器环境中，你需要引入v12 SDK的UMD包（而非v2的common文件）：

• 从npm安装后，使用路径@azure/storage-blob/dist/umd/azure-storage-blob.js引入
• 引入后，全局对象为AzureStorageBlob，而非原来的AzureStorage

3. 替换核心上传代码逻辑 #

原来基于v2的上传代码（类似这样）：

// v2旧代码
var blobService = AzureStorage.Blob.createBlobServiceWithSas(accountUrl, sasToken);
blobService.createBlockBlobFromBrowserFile(containerName, blobName, file, function(error, result, response) {
  if (!error) {
    // 处理上传成功逻辑
  }
});

需要替换为Preview 15的v12代码：

// v12 Preview 15代码
const { BlobServiceClient } = AzureStorageBlob;

// 构造带SAS令牌的完整存储账户URL
const sasUrl = `${你的存储账户URL}?${你的SAS令牌}`;
// 创建Blob服务客户端
const blobServiceClient = new BlobServiceClient(sasUrl);
// 获取目标容器的客户端
const containerClient = blobServiceClient.getContainerClient(你的容器名称);
// 获取要上传的Blob客户端
const blockBlobClient = containerClient.getBlockBlobClient(你的Blob名称);

// 上传本地文件（支持async/await或Promise链式调用）
blockBlobClient.uploadBrowserFile(你的本地文件对象)
  .then(uploadResult => {
    console.log("文件上传成功", uploadResult);
  })
  .catch(err => {
    console.error("上传失败", err);
  });

4. IE浏览器兼容性注意 #

如果你仍需要支持IE浏览器，v12 SDK需要额外处理：

• v12使用了ES6+特性，需要引入polyfill（比如core-js）来兼容IE
• 可以通过Webpack等打包工具，将SDK和polyfill一起编译为兼容IE的代码

关键提醒 #

绝对不要混用v2的azure-storage.common.js和v12的Preview 15包，两者架构完全独立，不存在兼容层，混用必然导致API未定义的报错。

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