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

Upload an image file to azure blob storage from js

本文关键字：文件 图像 azure 存储 blob 一个 js      更新时间：2023-09-26

我正试图将一个图像文件从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%2B4cJ6uwnW7LUh7fYQH2wKsRuCg%3D"

感谢任何帮助，谢谢。

这当然是正确的方法，但也有一些事情：

  1. 您必须在请求中包含x-ms-blob-type请求标头，其值应为BlockBlob
  2. 此外，请注意，为了实现这一点，您需要将HTML页面托管在同一存储帐户中，因为截至目前，Azure Blob存储中不支持CORS。所以，如果你的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/

我现在找到了一个能解决这个问题的解决方案。我的上传现在工作如下：

  • 我将文件作为DataURL读取到FileReader 中

  • 我对返回的字符串进行切片，并将每个切片发送到服务器存储在会话变量中

  • 一旦整个文件被发送出去，我就会调用另一个网络服务将切片重新粘合在一起，并将结果转换为字节数组

  • 字节数组然后作为文件存储在azure 的本地存储器中

  • 最后，文件从本地存储转移到blob存储

参见代码：

将文件从html上传到azure

相关文章：