小编典典

使用React将BlockBlob上传到Azure存储

reactjs

我还没有一个可行的例子。我的以下示例告诉我,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;
    }

阅读 378

收藏
2020-07-22

共1个答案

小编典典

以下是存储JS v2和V10 SDK在浏览器方案支持方面的一些区别:

  1. V10支持带有 npm软件包经典单个JS捆绑文件的 浏览器方案;V2仅通过 经典的单个JS捆绑包文件( 例如Peter Pan的示例)支持浏览器使用。

  2. V10在浏览器中不支持SharedKeyCredential,而V2支持。

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

2020-07-22