从客户端下载 AWS S3 文件
Posted
技术标签:
【中文标题】从客户端下载 AWS S3 文件【英文标题】:AWS S3 File Download from the client-side 【发布时间】:2019-03-04 07:39:57 【问题描述】:我目前正在尝试使用前端的按钮从 s3 存储桶下载文件。怎么可能做到这一点?我不知道如何开始这件事。我已经尝试过研究和研究,但没有运气 - 我搜索的只是 UPLOADING 文件到 s3 存储桶,而不是 DOWNLOADING 文件。提前致谢。
注意:我将它应用到 ReactJS (Frontend) 和 NodeJS (Backend) 并且文件是使用 Webmerge 上传的
更新:我正在尝试用这个生成一个下载链接(即使我不是后端开发人员也尝试过节点)(大声笑)
见下图
what I have tried so far
onClick function
【问题讨论】:
你尝试了什么?简单的搜索给了我这个页面docs.aws.amazon.com/AWSjavascriptSDK/latest/AWS/… developer.mozilla.org/en-US/docs/Web/html/Element/a 我认为它通常只是一个 HTTP GET(即标准的网络下载),如果它是一个非公共存储桶,则附加正确的凭据。 @Rup,哦,我明白了,找不到 正确的凭据 tho @RohitDhiman 我已经更新了我的问题并用代码图像支持它。谢谢:) 【参考方案1】:如果您尝试下载的文件不是公开的,那么您必须创建一个签名的 url 来获取该文件。
解决方案在这里Javascript to download a file from amazon s3 bucket? 用于获取非公共文件,它围绕创建一个 lambda 函数,该函数将为您生成一个签名的 url,然后使用该 url 在按钮单击时下载文件
但是如果您尝试下载的文件是公开的,那么您不需要签名的 url,您只需要知道文件的路径,url 的结构如下:https://s3.amazonaws.com/ [文件路径]/ [文件名]
它们也是由 AWS 团队创建和维护的 aws amplify。
只需关注Get started 并从您的 React 应用程序下载文件就是这样:
Storage.get('hello.png', expires: 60)
.then(result => console.log(result))
.catch(err => console.log(err));
【讨论】:
太棒了!谢谢:) 请让我知道它是怎么回事,如果我的回答对你有任何帮助,如果我得到赞成或标记为正确答案,我将不胜感激:) 这不像登录到控制台那么容易,因为登录到控制台并没有将文件下载给我的用户。我找不到任何有关如何将链接实际获取到页面上或下载给用户的示例。这是一个承诺,所以我必须等待它,不能只是将它添加到链接标签中......【参考方案2】:这是我的解决方案:
let downloadImage = url =>
let urlArray = url.split("/")
let bucket = urlArray[3]
let key = `$urlArray[4]/$urlArray[5]`
let s3 = new AWS.S3( params: Bucket: bucket )
let params = Bucket: bucket, Key: key
s3.getObject(params, (err, data) =>
let blob=new Blob([data.Body], type: data.ContentType);
let link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download=url;
link.click();
)
参数中的url指的是S3文件的url。
只需将其放在按钮的onClick
方法中即可。您还需要AWS SDK
【讨论】:
你能添加这个解决方案的html部分吗 @Banani720 我认为应该有一个清理步骤来撤销对象 URL 并从 DOM 中删除链接。以上是关于从客户端下载 AWS S3 文件的主要内容,如果未能解决你的问题,请参考以下文章
AWS S3 createPresignedPost 与 getSignedUrl。我应该使用哪一个从客户端上传各种文件?
在 PHP 中从 AWS S3 中的文件创建 zip 的最佳方法? [关闭]
如何使用节点、createPresignedPost 和 fetch 将图像文件直接从客户端上传到 AWS S3