我还没有一个可行的例子。我的以下示例告诉我,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; }
以下是存储JS v2和V10 SDK在浏览器方案支持方面的一些区别:
V10支持带有 npm软件包 和 经典单个JS捆绑文件的 浏览器方案;V2仅通过 经典的单个JS捆绑包文件( 例如Peter Pan的示例)支持浏览器使用。
V10在浏览器中不支持SharedKeyCredential,而V2支持。
因此,如果您正在构建React Web APP并使用npm依赖关系导入存储SDK。请使用V10。另外,请不要在浏览器中使用帐户名和密钥,因为这样做不安全。