Question

我想允许我的用户下载图片，我知道如果我有一个文件，我可以使用标签下载，它可以工作，但是如果我有链接，它就不工作

我已经尝试过下载标签，并阅读了谷歌云存储的下载对象文档，但是最后一个的问题是它已经在我的服务器上下载了，我也试图返回文件，但这只是一个承诺没有文件信息

带有下载代码的前端（不起作用），我已经用download={preview}尝试过

      <div className={classes.fileInputs}>
        <a download href={preview} title="Imagen">
          <img
            src={preview}
            alt='Preview obj'
            className={classes.imgPreview}
          />
        </a>

这是我认为应该工作的方式，但没有，下载会触发向后端的请求，但是图像已下载到我的服务器中

<Button color="inherit" onClick={() => download()}>
   Download
</Button>

我只希望单击下载按钮即可使客户端具有其图像

Answer 1

如果需要，可以使用axios：

axios({
url: 'http://localhost:5000/static/example.jpg',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.jpg');
document.body.appendChild(link);
link.click();
});

您可以查看更多详细信息here

Answer 2

要通过“内容处置” -header设置文件和文件名的类型，可以使用以下方法：

const blob = new Blob（[response.data]，{type：response.data.type}）;

const url = window.URL.createObjectURL（blob）;

const link = document.createElement（'a'）;

link.href = url;

const contentDisposition = response.headers ['content-disposition'];

let fileName ='unknown';

if（contentDisposition）{

const fileNameMatch = contentDisposition.match(/filename="(.+)"/);

if (fileNameMatch.length === 2)

    fileName = fileNameMatch[1];

}

link.setAttribute（'download'，fileName）;

document.body.appendChild（link）;

link.click（）;

link.remove（）;

window.URL.revokeObjectURL（url）;

以用户身份从前端下载图像（我有链接）？

2 个答案: