使用 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 提供了一个非常好的运行 .Net Core 服务 React 的 Web 应用程序模板。我能够在服务器上使用以下代码来获取 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

以下是 storage JS v2 和 V10 SDK 在浏览器场景支持方面的一些区别：

1. V10 支持带有npm 包 和经典单JS 包文件 的浏览器场景； V2 仅支持与彼得潘的示例一样的经典单个 JS 捆绑文件的浏览器使用。

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

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

Answer 2

我看到您使用 Azure Storage SDK v2 用于 JavaScript 将 React 中的文件从浏览器上传到 Azure Blob 存储。有一个类似的 SO 线程 How to upload folder into azure automatically? 我已经用 JavaScript 中的完整代码回答了它。我认为它可以帮助您编写 React 代码并使其在浏览器中运行。

根据您的描述和代码，我在使用 Azure Storage JS SDK v2 时给您一些建议。

1. 根据我的经验，有一些与 Node.js 和浏览器不兼容的地方。所以不能在浏览器中使用createBlockBlobFromLocalFile方法上传文件。

2. 请参考文档Azure Storage JavaScript Client Library Sample for Blob Operations在您的HTML文件中导入azure-storage.blob.js进行如下blob操作。

   <script src="azure-storage.blob.js"></script>
   

   或在线版本。

   <script src="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script>
   

3. 然后，你就可以在浏览器中使用createBlockBlobFromBrowserFile方法了。

同时，Azure Storage JS SDK 的新版本是v10，它似乎提高了兼容性，您可以关注它的 API标记为“仅在 NODE.JS 运行时可用”或“仅适用于 BROWSERS" 了解 Node.js 和浏览器运行时之间的差异。

希望对你有帮助。

.