如何通过 React 中的预签名 S3 URL 预览图像？答案

【问题标题】：How do I preview an image via a presigned S3 URL in React?如何通过 React 中的预签名 S3 URL 预览图像？
【发布时间】：2021-12-03 01:02:38
【问题描述】：

我有一个有效期为 20 秒的 AWS 预签名下载 URL：

https://our-namespace.s3.amazonaws.com/documents/7443912/ffb9bbc5-5f4f-4315-a4e8-418bc31dbef2.png?X-Amz-Security-Token=123&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211007T004004Z&X-Amz-SignedHeaders=host&X-Amz-Expires=20&X-Amz-Credential=ASIA4SLAKW7L216GHWOI%2F20278006%2Fus-east-1%2GF3%2Faws4_request&X-Amz-Signature=123

当我在浏览器中加载此 URL 时，它会强制下载。我正在寻找一种在浏览器中将其显示为图像预览的方法 - 而不是启动文件下载。

我最初的想法是将此 URL 转换为 blob，然后在图像预览模式中显示该 blob。唯一的问题是，我不确定如何做到这一点。我找到了以下包：https://www.npmjs.com/package/rn-fetch-blob，但它似乎不再维护。

从仅 AWS 下载链接将图像显示为预览的最佳方式是什么？

【问题讨论】：

是否为底层 S3 对象设置了正确的内容类型？您的浏览器对其他 PDF 有什么作用？
来自 AWS 的响应标头是问题所在。 AWS 发送“Content-Type: application/octet-stream”，但您需要“Content-Type: application/pdf”
@jarmod @Unigazer 我不小心为 S3 链接使用了错误的 url 格式。我刚刚在问题中更新了它 - 你的 cmets 仍然适用吗？如果是这样，我怎样才能让 AWS 将content-type 作为application/pdf 发送？你怎么知道它是以application/octet-stream 的形式出现的？我不确定如何查看这个
是的，内容类型很重要。这决定了如何将下载的文件呈现给用户代理。所有 SDK 和 awscli 都允许上传者指明内容类型。
所有这些关于代理和编码解决方案的讨论都不应该是必要的。 S3 对象可以具有 Content-Type 元数据。在上传的 PNG 和 PDF 上正确设置它，然后为每个生成预签名的 URL，然后在浏览器中调用这些 URL。然后，您的浏览器可以选择显示/预览文件而不是下载它。注意：如果您通过 AWS S3 控制台上传文件，它通常会分配正确的 Content-Type，因此您不必这样做。

标签： javascript node.js reactjs amazon-web-services amazon-s3

【解决方案1】：

您需要为 S3 中的每个对象设置正确的Content-Type，例如application/pdf 或image/png。

您可以在上传对象时执行此操作，也可以在之后使用 AWS S3 控制台对其进行修改。请注意，Content-Type 被视为元数据。

在对象上设置正确的Content-Type 意味着当对象由 S3 或 CloudFront 提供服务时，该 Content-Type 将被传送给客户端，允许它酌情决定显示或下载。

【讨论】：

知道了，所以目前content-type 标头始终为binary/octet-stream。只是为了确保我正确理解您 - 如果我将标题更改为更合适的内容，例如image/png，那么我将能够在<img src="s3-link-with-correct-headers" /> 之类的图像标签中预览它？
是的，尽管存在浏览器和其他潜在的缓存问题。这应该很容易确认（如前所述）。上传几个 PDF 或 PNG，一个具有正确的内容类型，一个没有。为每个 URL 创建预签名的 URL，然后将它们粘贴到浏览器 URL 栏中（或在简单的 HTML 文件中将它们用作 img src 属性）。