下载映像不适用于基于 AWS 的 URL

Question

我曾经只需在锚元素中添加一个download属性即可下载图像，并在 href 属性上添加图像路径。

<a href="https://s3.amazonaws.com/..../Producer.png" download>Download</a>

现在，随着chrome最新更新与cors(跨源资源共享(，图像将在新选项卡中打开。

我对谷歌做了各种研究，包括stackoverflow本身。但他们都没有帮助我。这不是可以从存储桶下载图像s3吗？

我也启用了来自 aws 的 cors。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

现在我正在使用这个函数来接受网址和文件名

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

并在 OnClick 事件中使用了此函数。

<div class="download-icon" onclick="forceDownload('https://s3.amazonaws.com/.../images.jpg','images.jpg')"> Download</div>

还尝试使用文件保护程序.js

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.onload = function() {
     saveAs(xhr.response, fileName);
    }
    xhr.send()
}

注意：通过所有这些函数实现，我得到了部分结果。 仅下载 2 或 3 张图像，然后开始显示与 CORS 相关的问题。

Answer 1

试试这个：

    let forceDownload = 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

参数是指图像的完整 url。

您还需要aws-sdk。

Answer 2

在 S3 存储桶中找到要使用的文件并单击它。
点击"属性"选项卡
点击显示"元数据">
的框单击内容类型左侧的圆圈，然后单击"添加元数据">
将"键"设置为"内容处置"，并将值设置为"附件"并点击保存。
这将强制下载它，而不是在您的浏览器中播放或显示。

对于用于上传到 s3 的任何后端方法，请确保 ContentDisposition='attachment'，您还需要验证您的 href 不是用 http 命名的：它必须是 https：