reactjs - 使用 React 将 BlockBlob 上传到 Azure 存储

Question

我还没有找到一个有效的例子。我的以下示例告诉我 createBlockBlob 方法未定义。

注意:我也尝试过 createBlockBlobFromLocalFile 并传入文件名，但仍然没有成功。

import React from 'react';
var storage = require('azure-storage');

const CONNECTION_STRING = "MYCONNECTIONSTRING";
const BlockBlobContainerName = "MYCONTAINERNAME";
const BlobName = "MYBLOBNAME";

class NumberUploader extends React.Component {

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

   buttonClick(myFile) {
      var blobService = storage.createBlobService(CONNECTION_STRING);
      blobService.createContainerIfNotExists(BlockBlobContainerName, function (error) {
         if (error) {
            console.log("error creating container");
         }
      });
      blobService.createBlockBlobFromBrowserFile(BlockBlobContainerName, BlobName, myFile, function (error, result, response) {
         if (error) {
            alert('Upload failed, open browser console for more detailed info.');
            console.log(error);
         } else {
            setTimeout(function () { // Prevent alert from stopping UI progress update
               alert('Upload successfully!');
            }, 1000);
         }
      });
   }
};
export default NumberUploader;

编辑:Visual Studio 提供了一个非常好的 Web 应用程序模板，运行 .Net Core 服务 React。我能够在服务器上使用以下代码来获取 SASToken 并将其传递给 React。从那里，您可以将浏览器文件上传方法与 SAS 结合使用。

    static string GetAccountSASToken()
    {
        // To create the account SAS, you need to use your shared key credentials. Modify for your account.
        const string ConnectionString = "GET_STRING_FROM_STORAGE_ACCOUNT";
        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(ConnectionString);

        // Create a new access policy for the account.
        SharedAccessAccountPolicy policy = new SharedAccessAccountPolicy()
        {
            Permissions = SharedAccessAccountPermissions.Read | SharedAccessAccountPermissions.Write | SharedAccessAccountPermissions.List,
            Services = SharedAccessAccountServices.Blob | SharedAccessAccountServices.File,
            ResourceTypes = SharedAccessAccountResourceTypes.Service,
            SharedAccessExpiryTime = DateTime.UtcNow.AddHours(24),
            Protocols = SharedAccessProtocol.HttpsOnly
        };

        // Return the SAS token.
        string token = storageAccount.GetSharedAccessSignature(policy);
        return token;
    }

Answer 1

以下是存储JS v2和V10 SDK在浏览器场景支持方面的一些差异:

1. V10支持npm包和经典单JS包文件的浏览器场景； V2 仅支持浏览器使用经典的单个 JS 捆绑文件，如 Peter Pan 的示例。

2. V10 不支持浏览器中的 SharedKeyCredential，而 V2 支持。

所以，如果您正在构建 React Web APP 并使用 npm 依赖项导入存储 SDK。请使用V10。另外请不要在浏览器中使用帐户名和 key ，因为这不安全。