29

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

4

5 回答 5

12

请查看这些博客文章，以将文件直接从浏览器上传到 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，因此不适用于所有浏览器。

基本思想是为 blob 容器创建一个Shared Access Signature (SAS)。SAS 应该有Write权限。由于 Windows Azure Blob 存储尚不支持CORS（Amazon S3 和 Google 都支持），因此您需要将 HTML 页面托管在希望用户上传文件的 Blob 存储中。然后就可以使用 jQuery 的 Ajax 功能了。

于 2013-03-28T02:46:44.423 回答
11

编辑 2019 年 11 月

您现在可以参考官方文档：

初步答案

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

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

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

我们强烈建议使用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>
于 2017-11-02T22:33:42.337 回答
5

现在 Windows Azure 存储服务支持 CORS，您可以执行此操作。您可以在此处查看公告：Windows Azure 存储版本 - 引入 CORS、JSON、分钟指标等。

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

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

于 2013-12-12T12:07:30.380 回答
2

我写了一篇博客文章，其中有一个关于如何做到这一点的示例，代码位于 GitHub

它基于Gaurav Mantris 帖子，通过在 Blob 存储本身上托管 JavaScript 来工作。

于 2013-10-16T09:37:28.877 回答
1

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

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

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

于 2013-03-27T22:32:55.067 回答