使用React将BlockBlob上传到Azure存储 [英] Upload BlockBlob to Azure Storage using React

问题描述

我无法得到一个可行的例子. 我的以下示例告诉我，createBlockBlob方法未定义.

I haven't been able to get a working example. My following example tells me that the createBlockBlob method is undefined.

注意:我也尝试过createBlockBlobFromLocalFile并传入文件名，但还是没有运气.

Note: I've also tried createBlockBlobFromLocalFile and passed in the filename and still no luck.

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一起使用.

Visual Studio provides a really good web app template running .Net Core serving React. I was able to use the following code on the server to get the SASToken and pass it to React. From there, you can use the browser file upload method with the 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;
    }

推荐答案

存储JS v2和V10 SDK在浏览器方案支持方面存在一些差异:

Here are some differences between storage JS v2 and V10 SDK regarding browser scenarios support:

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

1. V10 support browser scenarios with npm package and classic single JS bundle file; V2 only supports browser usage with classic single JS bundle file like Peter Pan's sample.

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

V10 doesn't support SharedKeyCredential in browsers, while V2 supports.

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

So, if you are building a React Web APP and importing storage SDK using npm dependency. Please use V10. Also please don't use account name and key in browsers, because it's not safe.

这篇关于使用React将BlockBlob上传到Azure存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！