React上传BlockBlob至Azure Storage遇方法未定义及SASToken解决方案尝试

我太懂你踩的这个坑了！你用的azure-storage npm包本质上是为Node.js环境开发的，浏览器环境下它的API被大幅阉割了——createBlockBlob、createBlockBlobFromLocalFile这些方法根本就没在浏览器版里实现，哪怕是你试的createBlockBlobFromBrowserFile，也经常因为依赖或版本问题出状况。

而且更关键的是：绝对不能把Azure Storage的连接字符串直接写在前端代码里，这会导致你的存储账户密钥泄露，风险极高。你已经想到用服务端生成SAS Token的方式，这才是正确的方向！

正确的前端实现方案（基于SAS Token） #

首先建议你改用微软官方的新一代浏览器兼容SDK @azure/storage-blob，它专门针对多环境做了优化，API更清晰也更可靠。

步骤1：安装依赖

npm install @azure/storage-blob

步骤2：调整React组件代码

假设你已经通过服务端接口或者props拿到了生成好的SAS Token，修改后的代码如下：

import React from 'react';
import { BlobServiceClient } from '@azure/storage-blob';

class NumberUploader extends React.Component {
  constructor(props) {
    super(props);
    // 从服务端获取的存储账户名和SAS Token
    this.storageAccountName = "你的存储账户名称";
    this.sasToken = props.sasToken; // 比如通过接口请求或者父组件传递
  }

  render() {
    return (
      <div className="App">
        <input type="file" onChange={(e) => this.handleFileUpload(e.target.files[0])} />
      </div>
    );
  }

  async handleFileUpload(file) {
    if (!file) return;

    try {
      // 用SAS Token初始化Blob服务客户端
      const blobServiceClient = new BlobServiceClient(
        `https://${this.storageAccountName}.blob.core.windows.net?${this.sasToken}`
      );

      // 获取容器客户端，确保容器存在（如果服务端已提前创建可跳过此步）
      const containerClient = blobServiceClient.getContainerClient("MYCONTAINERNAME");
      await containerClient.createIfNotExists();

      // 获取目标Blob的客户端，调用浏览器文件上传API
      const blobClient = containerClient.getBlockBlobClient("MYBLOBNAME");
      const uploadResult = await blobClient.uploadBrowserData(file);

      console.log("上传成功详情:", uploadResult);
      setTimeout(() => alert('Upload successfully!'), 1000);
    } catch (error) {
      console.error("上传失败原因:", error);
      alert('Upload failed, open browser console for more detailed info.');
    }
  }
};

export default NumberUploader;

优化你的服务端SAS Token生成代码 #

你提供的服务端生成SAS的代码是可行的，但可以针对Blob上传场景做精准权限配置，避免开放不必要的权限：

static string GetBlobSASToken() {
  const string ConnectionString = "你的存储账户连接字符串";
  CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConnectionString);
  
  // 针对Blob容器和Blob的精准权限配置
  SharedAccessAccountPolicy policy = new SharedAccessAccountPolicy() {
    Permissions = SharedAccessAccountPermissions.Write | SharedAccessAccountPermissions.List,
    Services = SharedAccessAccountServices.Blob, // 只开放Blob服务
    ResourceTypes = SharedAccessAccountResourceTypes.Container | SharedAccessAccountResourceTypes.Object, // 允许操作容器和Blob
    SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
    Protocols = SharedAccessProtocol.HttpsOnly
  };

  string token = storageAccount.GetSharedAccessSignature(policy);
  return token;
}

为什么旧方法会报错？ #

• azure-storage包的Node.js版本包含了所有服务端操作的API，但浏览器版本为了体积和安全，只保留了极少数兼容的方法（比如早期的createBlockBlobFromBrowserFile），而且这些方法现在已经被官方标记为废弃。
• 直接在前端暴露存储账户连接字符串是严重的安全漏洞，任何拿到连接字符串的人都可以完全控制你的存储账户，所以用服务端生成的SAS Token才是合规且安全的做法。

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