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

Question

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

Answer 1

既然Windows Azure存储服务支持CORS，您就可以这样做了。你可以在这里看到公告：Windows Azure存储发布版——引入CORS、JSON、分钟指标等。

我举了一个简单的例子来说明这种情况：http://www.contentmaster.com/azure/windows-azure-storage-cors/

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

Answer 2

编辑十一月2019

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

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

初步答案

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

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

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

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

代码示例：

>

在超文本标记语言代码中插入以下脚本标记。确保JavaScript文件位于同一文件夹中。

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

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

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

到目前为止，我们已经包含了客户端库，并添加了HTML代码，向用户显示文本输入和启动传输的按钮。当用户单击upload按钮时，将调用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 3

请看一下这些博客文章，将文件直接从浏览器上传到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

第二篇文章（我写的）使用了HTML5文件API，因此不能在所有浏览器中使用。

基本思想是为blob容器创建共享访问签名（SAS）。SAS应具有写入权限。由于Windows Azure Blob存储尚不支持CORS（Amazon S3和谷歌都支持CORS），因此您需要在Blob存储中托管HTML页面，以便用户上传文件。然后可以使用jQuery的Ajax功能。