如何保存图像并在 ReactJS 中下载？

Question

我有一个显示照片库的应用程序。在每张照片下都有一个按钮，单击该按钮时应该将照片保存在用户的计算机上。不幸的是，这些照片在下载时会保存为 HTML 文档。这就是下载后无法打开的原因。照片存储在使用nodejs 附加到项目的静态上传文件夹中。如何下载照片以便以正确的格式保存？

我已经尝试过使用download 属性，方法是将照片放在a 标签下，如下所示：

<a href={file.path} download>download</a>` or `<a href={file.path} download={file.name}>download</a>.

我也尝试使用file-saver 模块，但没有得到肯定的结果。使用此解决方案，图像也保存为 HTML 文档：

const Gallery = () => {
//
const downloadImage = (file) => {
  saveAs(
    `http://localhost:3000${file.path}`,
     file.name + '.' + file.type
   )
}

//

  return (
    <button onClick={downloadImage(currentFile)} type='button'> download </button>
  )
}

在react-router-dom中，我没有设置路由，所以点击照片后可以直接预览照片。

Answer 1

我认为这对你有帮助，调用 download 函数然后传递 图片 url、下载后的图片名称和 图片类型

function toDataURL(url) {
  return fetch(url)
    .then((response) => {
      return response.blob();
    })
    .then((blob) => {
      return URL.createObjectURL(blob);
    });
}

async function download(url, name = "download", type = "png") {
  const a = document.createElement("a");
  a.style.display = "none";
  a.href = await toDataURL(url);
  a.download = name + "." + type;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

代码源 => https://stackoverflow.com/a/56041886/11115457

代码说明

首先创建临时链接（不可见）然后向您的服务器发送请求以获取图像数据，然后将图像数据设置为我们创建的链接href然后将链接添加到正文，我们需要使用js虚拟点击此链接最后删除来自body的标签

完成，图片下载...