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

标签 javascript image file-upload azure azure-blob-storage

我正在尝试将图像文件从 html 页面上传到 azure blob 存储。到目前为止,我已经编写了一个 Web 服务来为我的 blob 容器创建 SAS。由此我创建了一个格式为“blob 地址”/“容器名称”/“blob 名称”的 uri? “萨斯”。我的 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”

感谢任何帮助,谢谢。

最佳答案

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

  1. 您必须在请求中包含 x-ms-blob-type 请求 header ,其值应为 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/

关于javascript - 从js上传图像文件到azure blob存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17919968/

相关文章:

file-upload - 将附加元数据作为文件上传请求的一部分上传到 Google Cloud Storage

javascript - 沿矩形路径平滑移动 SVG 线

javascript - AngularJS 没有用范围内的动态数据替换表达式?

C++ 处理 PPM 图像

python - Keras 图像增强 : How to choose "steps per epoch" parameter and include specific augmentations during training?

PHP文件上传创建目录

javascript - 将您的 Javascript 分成单独的文件会对性能产生影响吗?

javascript - jQuery 仅单击按钮一次

java - ZK替换图片内容

mysql - 如何将数据加载到不带空格的 MySQL 表中?