将图像文件从js上传到azure blob存储

Question

我正在尝试将图像文件从html页面上传到azure blob存储.到目前为止,我已经编写了一个Web服务来为我的blob容器创建一个SAS.从这里我创建了一个格式为"blob地址"/"容器名称"/"blob名称"的uri？"SAS".我的html页面上有一个上传控件.

然后我尝试使用以下代码上传文件:

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("PUT", blobPath);
xhr.send(upFile.files[0]);

其中blobPath是上面的uri,upFile是我的html上传控件.

当我尝试上传文件时,会触发uploadFailed例程.那么:这是正确的方法吗？如何捕获上传返回的错误,以便我可以看到出现了什么问题？

我的sas看起来像:"sr = c&si = mypolicy&sig = onZTE4buyh3JEQT3%2B4cJ6uwnWX7LUh7fYQH2wKsRuCg%3D"

任何帮助表示感谢,谢谢.

Answer 1

这当然是正确的方法,但有一些事情:

1. 您必须在x-ms-blob-type请求中包含请求标头,它的值应该是BlockBlob.
2. 另请注意,为此,您需要在同一存储帐户中托管HTML页面,因为CORS截至今天,Azure Blob存储不支持此页面.因此,如果您的html页面托管在其他某个域中,则会因CORS而出错.

您可能会发现这些博客文章对于使用SAS和AJAX上传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/