如何在React中通过S3预签名URL实现图片预览而非强制下载

浏览器触发强制下载的核心原因是S3返回的响应头中Content-Disposition值为attachment，通知浏览器直接下载文件而非解析展示。

方案1：调整预签名URL生成逻辑（优先推荐） #

不需要修改前端代码，从根源解决问题，操作成本最低：

• 生成预签名URL时，在参数中添加ResponseContentDisposition = 'inline'，同时指定ResponseContentType为对应图片的MIME类型（比如image/png、image/jpeg）
• 生成的URL直接放入<img>标签的src属性即可直接预览，不会触发下载
• 如果所有该路径下的图片都需要预览，也可以直接修改S3对应对象的元数据，将Content-Disposition设为inline，Content-Type设为正确的图片类型，后续生成的所有预签名URL默认支持预览

方案2：前端转Blob实现（无法调整URL生成逻辑时使用） #

如果只能拿到现有的强制下载类型的预签名URL，可以直接用浏览器原生API实现，不需要引入第三方包：

实现前提 #

先配置S3桶的CORS规则，允许你的前端域名发起GET请求，避免跨域拦截。

代码实现 #

// 替换为你的预签名URL
const presignedDownloadUrl = "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";

// 生成可预览的Blob链接
async function generatePreviewUrl(presignedUrl) {
  try {
    // 注意预签名URL有效期仅20秒，需确保请求时URL未过期
    const res = await fetch(presignedUrl);
    if (!res.ok) throw new Error("资源请求失败");
    const imgBlob = await res.blob();
    return URL.createObjectURL(imgBlob);
  } catch (error) {
    console.error("预览链接生成失败：", error);
    return null;
  }
}

// 调用示例
generatePreviewUrl(presignedDownloadUrl).then(previewUrl => {
  if (previewUrl) {
    // 赋值给img标签的src属性即可展示
    document.querySelector("#previewImage").src = previewUrl;
  }
})

// 页面卸载/预览关闭时释放内存，避免内存泄漏
// window.addEventListener('beforeunload', () => URL.revokeObjectURL(previewUrl))

注意事项 #

• 预签名URL有效期只有20秒，需要在拿到URL后立刻发起请求，避免请求时URL已过期
• Blob URL仅在当前页面会话有效，刷新页面后需要重新生成
• 不需要使用时务必调用URL.revokeObjectURL()释放占用的内存

内容的提问来源于stack exchange，提问作者Noob