Question

我曾经只是通过在href属性上的图像路径的锚元素中添加download属性来下载图像。

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

现在使用带有cors的chrome最新更新（跨源资源共享），图像将在新选项卡中打开。

我在Google上进行了各种研究，包括stackoverflow本身。但他们都没有帮助我。这不能从s3桶下载图像吗？

此外，我还有来自aws的角色。

<?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>

还尝试使用Filesaver.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存储桶中找到您要使用的文件，然后单击它。
点击“属性”标签
点击显示“元数据”的框
单击Content-Type左侧的圆圈，然后单击“添加元数据”
将“密钥”设置为“ Content-Disposition”，并将值设置为“ attachment”，然后单击保存。
这将迫使其被下载，而不是在浏览器中播放或显示。

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

下载图片不适用于基于aws的网址

2 个答案: