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

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

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

根据我的经验，有些与Node.js和浏览器不兼容。因此，您不能在浏览器中使用createBlockBlobFromLocalFile方法来上传文件。
请参阅文档Azure Storage JavaScript Client Library Sample for Blob Operations，将azure-storage.blob.js导入HTML文件中，以进行如下blob操作。
```
<script src="azure-storage.blob.js"></script>
```
或在线版本。
```
<script src="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script>
```
然后，您可以在浏览器中使用createBlockBlobFromBrowserFile方法。

与此同时，v10的新版本的Azure Storage JS SDK似乎改善了兼容性，您可以注意其标有“ ONDE AVAILABLE IN NODE.JS RUNTIME”的API 。或“仅适用于浏览器” ，以了解Node.js和浏览器运行时之间的区别。

希望有帮助。

。

Answer 2

关于浏览器方案支持，存储JS v2和V10 SDK之间存在一些差异：

V10支持带有 npm软件包和经典单个JS捆绑包文件的浏览器方案； V2仅支持使用经典的单个JS捆绑包的浏览器，例如Peter Pan的示例。
V10在浏览器中不支持SharedKeyCredential，而V2支持。

因此，如果您要构建React Web APP并使用npm依赖关系导入存储SDK。请使用V10。另外，请不要在浏览器中使用帐户名和密钥，因为这样做不安全。

使用React将BlockBlob上传到Azure存储

2 个答案: