直接从浏览器上传文件到Azure Blob存储？

Question

是否可以创建一个html表单,以允许Web用户直接将文件上传到azure blob商店,而无需使用其他服务器作为中介？S3和GAW blobstore都允许这样做但我无法找到对azure blob存储的任何支持.

Answer 1

编辑 2019 年 11 月

现在可以参考官方文档：

• 用于 Blob 操作的 Azure 存储 JavaScript 客户端库示例
• 适用于 JavaScript 的 Azure 存储客户端库

初步答复

有一个适用于浏览器的新 Azure 存储 JavaScript 客户端库（预览版）。

（这篇文章的所有内容都来自上面的原始文章）

• 适用于 Azure 存储的 JavaScript 客户端库支持使用 Blob、表、队列和文件等存储服务的许多 Web 开发方案，并且与现代浏览器兼容
• 用于浏览器的新 JavaScript 客户端库支持最新 REST API 版本 2016-05-31 中可用的所有存储功能，因为它是通过 Browserify 使用 Node.js 的 Azure 存储客户端库构建的

我们强烈建议使用SAS 令牌对 Azure 存储进行身份验证，因为 JavaScript 客户端库将在浏览器中向用户公开身份验证令牌。强烈建议使用范围和时间有限的 SAS 令牌。在理想的 Web 应用程序中，后端应用程序应在用户登录时对其进行身份验证，然后向客户端提供 SAS 令牌以授权访问存储帐户。这消除了使用帐户密钥进行身份验证的需要。查看我们的 Github 存储库中的Azure 函数示例，该示例根据 HTTP POST 请求生成 SAS 令牌。

代码示例：

1. 在 HTML 代码中插入以下脚本标记。确保 JavaScript 文件位于同一文件夹中。

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

2. 现在让我们向页面添加一些项目以启动传输。在 BODY 标签内添加以下标签。请注意，该按钮在单击时会调用 uploadBlobFromText 方法。我们将在下一步中定义此方法。

   <input type="text" id="text" name="text" value="Hello World!" />
   <button id="upload-button" onclick="uploadBlobFromText()">Upload</button>
   

3. 到目前为止，我们已经包含了客户端库并添加了 HTML 代码来向用户显示文本输入和启动传输的按钮。当用户点击上传按钮时，uploadBlobFromText 将被调用。现在让我们定义一下：

   <script>
   function uploadBlobFromText() {
       // your account and SAS information
       var sasKey ="....";
       var blobUri = "http://<accountname>.blob.core.windows.net";
       var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());
       var text = document.getElementById('text');
       var btn = document.getElementById("upload-button");
       blobService.createBlockBlobFromText('mycontainer', 'myblob', text.value,  function(error, result, response){
           if (error) {
               alert('Upload filed, open browser console for more detailed info.');
               console.log(error);
           } else {
               alert('Upload successfully!');
           }
       });
   }
   </script>
   

Answer 2

请查看这些博客文章,直接将文件从浏览器上传到blob存储:

http://coderead.wordpress.com/2012/11/21/uploading-files-directly-to-blob-storage-from-the-browser/

http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript

第二篇文章(由我编写)使用HTML 5 File API,因此无法在所有浏览器中使用.

基本思想是Shared Access Signature (SAS)为blob容器创建一个.SAS应该获得Write许可.由于Windows Azure Blob存储尚不支持CORS(Amazon S3和Google都支持),因此您需要在blob存储中托管HTML页面,以便用户上载文件.然后你可以使用jQuery的Ajax功能.

Answer 3

既然Windows Azure存储服务支持CORS,您就可以执行此操作.您可以在此处看到此声明:Windows Azure存储版本 - 介绍CORS,JSON,分钟指标等.

我有一个简单的例子来说明这个场景:http://www.contentmaster.com/azure/windows-azure-storage-cors/

该示例显示了如何使用jQuery.ajax直接从私有blob上载和下载.此示例仍需要服务器组件来生成共享访问签名:这样可以避免在客户端代码中公开存储帐户密钥.

Answer 4

您可以使用 HTML5 文件 API、AJAX 和 MVC 3 构建强大的文件上传控件，将大文件安全可靠地上传到 Windows Azure blob 存储，并提供监视操作进度和操作取消的功能。该解决方案的工作原理如下：

1. 接受并处理用户上传的文件的客户端 JavaScript。
2. 处理 JavaScript 发送的文件块的服务器端代码。
3. 调用 JavaScript 的客户端 UI。

在此处获取示例代码：通过 HTML5 控件可靠上传到 Windows Azure Blob 存储