如何通过AWS预签名URL在浏览器中查看图片而非下载

要实现浏览器直接查看S3对象，核心是在生成预签名URL时指定响应头参数，告诉浏览器以内联方式打开文件，而非触发下载。

关键修改点 #

在getSignedUrlPromise的参数中添加两个配置项：

• ResponseContentDisposition: 'inline'：强制浏览器在标签页内展示文件，而非下载
• ResponseContentType：指定文件的MIME类型（如application/pdf、image/png等），帮助浏览器识别并启用预览

示例代码 #

固定MIME类型场景 #

如果已知文件类型，直接指定对应MIME：

var s3 = new AWS.S3();
const url = await s3.getSignedUrlPromise('getObject', {
    Bucket: process.env.S3_BUCKET_NAME,
    Key: fileKey,
    Expires: 90,
    ResponseContentDisposition: 'inline',
    ResponseContentType: 'application/pdf' // 根据实际文件类型替换，如image/jpeg、text/plain等
})

动态获取MIME类型场景 #

如果不确定文件类型，可以先通过headObject获取S3对象的原始ContentType，再传入参数：

var s3 = new AWS.S3();

// 先获取文件的原始ContentType
const headResult = await s3.headObject({
    Bucket: process.env.S3_BUCKET_NAME,
    Key: fileKey
}).promise();

const url = await s3.getSignedUrlPromise('getObject', {
    Bucket: process.env.S3_BUCKET_NAME,
    Key: fileKey,
    Expires: 90,
    ResponseContentDisposition: 'inline',
    ResponseContentType: headResult.ContentType
})

注意事项 #

• 仅当浏览器支持预览该文件类型时才会生效（如PDF、图片、文本文件等），如果是浏览器不支持的格式（如.exe、.zip），仍会触发下载，这是浏览器的固有限制。
• 确保ResponseContentType的值与文件实际类型匹配，否则可能导致预览异常。

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