使用 React（前端）从 Express（后端）下载图像

Question

我有一张图片存储在 Express 服务器中。我一直在尝试在 React 组件中使用以下方法下载图像。

 <a href={my_image_url_from_state} download>Download Image</a>

但是当我点击“下载图像”时，图像没有被下载。我看到此错误消息：

我可以在img标签中显示相同的图像，即

<img src={my_image_url_from_state} />

这意味着 URL 没有问题。

我是否需要在 Express 中进行任何更改才能下载任何文件？

Answer 1

我最终来到这里是因为我正在寻找一种从 cloudinary 下载我的 React 应用程序中的图像的方法，我发现上面的 sn-p 作为一个有用的起点。我遇到了与Darshn 相同的错误。我推测它无法正常工作的原因可能是后端原始 url 与客户端应用程序的来源不同。

然后我研究并发现锚元素的下载属性仅适用于同源 URL。见The Anchor element

然后我发现了一篇关于 Soumitra Roy Sarkar 的 Roy Tutorials 的文章，我能够将其整合到解决方案中。

我确定，由于我是从不同的来源提取图像，因此我需要获取图像，将其转换为 Blob，为其创建一个 URL，将 URL 附加到锚标记。

由于我已经在使用 Cloudinary React SDK，因此我能够将 cloudinary-core 添加到我的依赖项中。

yarn add cloudinary-core   

然后我将它导入到我的模块中

import cloudinary from 'cloudinary-core';
const cloudinaryCore = new cloudinary.Cloudinary({cloud_name: '<My Cloudinary Cloud Name>'});

我的下载功能如下：

function download({publicKey, name}) {

const downloadUrl = `${cloudinaryCore.url(publicKey)}.jpg`;
fetch(downloadUrl)
    .then((img) => img.blob())
    .then((blob) => {
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.href = url;
        link.download = name;
        link.click();
    })
}

该函数可以被这样的html元素调用：

<button onClick={() => {download({publicKey: '12345', name: 'image.jpg'})}}>Download</button>

Answer 2

您需要编写一个函数并在下载按钮的 OnClick 上调用它。

<button onClick={() => {download()}}>Download</button>

下载功能为：

function download() {
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();

}

reactJS 类中的工作代码

    class App extends React.Component {
    constructor() {
        super();
    }
    render() {
        return (
            <div>
                <img onClick={() => { download(); }} src="<The URL of the image>" />
            </div>
        );
    }
}

function download() {
    var link = document.createElement('a');
    link.href = 'images.jpg';
    link.download = '<The URL of the image>';
    document.body.appendChild(link);
    link.click();
}