如何从 Azure Blob 存储查看图像，而不是下载它？

Question

好的，所以我正在使用 Node.js 和 Azure Blob 存储来处理一些文件上传。

当有人上传图片时，我想向他们展示图片的缩略图。上传效果很好，我已将其存储在我的 blob 中。

我使用此链接 (Generating Azure Shared Access Signatures with BlobService.getBlobURL() in Azure SDK for Node.js) 帮助我创建此代码以创建共享访问临时 url。

process.env['AZURE_STORAGE_ACCOUNT'] = "[MY_ACCOUNT_NAME]";
process.env['AZURE_STORAGE_ACCESS_KEY'] = "[MY_ACCESS_KEY]";

var azure = require('azure');
var blobs = azure.createBlobService();

var tempUrl = blobs.getBlobUrl('[CONTAINER_NAME]', "[BLOB_NAME]",  { AccessPolicy: {
    Start: Date.now(),
    Expiry: azure.date.minutesFromNow(60),
    Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.READ
}});

这样就可以创建一个 url。

类似这样的：https://[ACCOUNT_NAME].blob.core.windows.net:443/[CONTAINER_NAME]/[BLOB_NAME]?st=2013-12-13T17%3A33%3A40Z&se=2013-12-13T18%3A33%3A40Z&sr=b&sp=r&sig=Tplf5%2Bg%2FsDQpRafrtVZ7j0X31wPgZShlwjq2TX22mYM%3D

问题是当我将临时 url 插入浏览器时，它只会下载图像而不是查看它（在这种情况下，它是一个简单的 jpg 文件）。

这意味着我的代码似乎无法在标签中查看...

链接正确，下载正确的文件...

我需要做些什么来查看图像而不是下载它吗？

谢谢， 大卫

更新

好的，所以我找到了这篇文章： http://social.msdn.microsoft.com/Forums/windowsapps/en-US/b8759195-f490-420b-a587-2bb614366ad2/embedding-images-from-blob-storage-in-ssrs-report-does-not-work

基本上它告诉我上传文件时没有设置文件类型，所以浏览器不知道如何处理它。

我使用了这里的代码：http://www.snip2code.com/Snippet/8974/NodeJS-Photo-Upload-with-Azure-Storage/

这让我可以正确上传它，它现在可以在浏览器中正确查看。

我现在遇到的问题是，当我将 tempUrl 放入 img 标签时，我得到了这个错误：

加载资源失败：服务器响应状态为 403（服务器验证请求失败。请确保 Authorization 标头的值格式正确，包括签名。）

这是完全相同的链接，如果我将它发布到我的浏览器它就可以正常工作...为什么我不能在图像标签中显示它？

更新 2

好的，作为一个愚蠢的测试，我从页面加载到 img 标签从临时 url 获取源时延迟了 7 秒。这似乎解决了问题（大部分时间），但显然，即使它有效，也是一个糟糕的解决方案......

至少这可以验证，因为它有时有效，所以我的标记至少是正确的。

我这辈子都想不通为什么延迟会带来一点不同......

想法？

更新 3

好的，根据下面的评论，我尝试将开始时间设置为过去 20 分钟左右。

var start = moment().add(-20, 'm').format('ddd MMM DD YYYY HH:mm:ss');
var tempUrl = blobs.getBlobUrl(Container, Filename,  { AccessPolicy: {
    Start: start,
    Expiry: azure.date.minutesFromNow(60),
    Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.READ
}});

我将开始变量的格式设置为与 azure.date.minutesFromNow 相同的格式。它看起来像这样：2013 年 12 月 13 日星期五 14:53:58

当我这样做时，我什至无法从浏览器中看到图像，更不用说 img 标签了。不知道我在那里做错了什么......

更新 4 - 已回答

感谢光荣的@MikeWo，我有了解决方案。正确的代码如下：

var tempUrl = blobs.getBlobUrl('[CONTAINER_NAME]', "[BLOB_NAME]",  { AccessPolicy: {
    Start: azure.date.minutesFromNow(-5),
    Expiry: azure.date.minutesFromNow(45),
    Permissions: azure.Constants.BlobConstants.SharedAccessPermissions.READ
}});

Mike 是正确的，因为服务器的开始时间和我的本地主机之间似乎存在某种脱节，所以我需要将开始时间设置为过去。在更新 3 中，我这样做了，但 Mike 注意到 Azure 不允许开始和结束时间超过 60 分钟......所以在更新 3 中，我在 -20 开始和 60 结束，即 80 分钟。

我上面提到的新的、成功的方法使总差异为 50 分钟，并且完全没有任何延迟。

感谢迈克抽出宝贵时间！

Answer 1

短版：分布式系统（包括 Azure）中存在一些时间偏差。在创建 SAS 而不是 Date.now() 的开始时间的代码中，将开始时间设置为过去的一两分钟。那么你应该能够消除延迟。

长版：创建签名和添加 Date.now 的机器上的时钟可能比 BLOB 存储中的机器快几秒钟。当立即发出对 URL 的请求时，BLOB 服务尚未达到 BLOB 的“开始时间”，因此会抛出 403。因此，通过将开始时间设置为过去几秒钟，甚至是当天如果你想覆盖一个巨大的时钟漂移，你需要处理时钟漂移。

更新：经过反复试验：确保在创建临时 SAS 时时间不能超过一个小时。将开始时间设置为过去几分钟，然后将到期时间设置为未来 60 分钟，这太大了。让它过去一点，然后不到一个小时就到期了。