在React中使用Axios下载图像吗？

Question

我正在尝试使用Axios中的GET请求下载图像，然后将其下载到用户PC。我需要使用Axios，因为get请求具有一个Authorization标头。

下面，我有下载图像并将其存储为blob的功能：

return axios({
  method: 'GET',
  headers: { Authorization: `Bearer ${jwt}` },
  url: `https://example.com/api/${url}`,
  responseType: 'blob'
})
.then(response => {
  if (response) {
    const file = new Blob([response.data], {type:'image/png'})
    return file
  }
  return Promise.reject('An unknown error occurred');
});

然后我使用FileSaver来保存此内容：

  const image = await userService.downloadImage(slug, this.props.token);
  FileSaver.saveAs(image, "image.png")

我得到的是下载文件

时出现错误

  

“失败-网络错误”

如果我查看Chrome的开发人员选项，则可以看到对API的GET请求，并且在预览标签中，可以看到图像。

关于我要去哪里的任何建议吗？

Answer 1

这意味着axios可以正常工作，但是文件保护程序不执行下载。

查看readme of file-saver repo，您会看到支持的浏览器：

因此，请尝试升级当前浏览器或使用其他浏览器进行测试。 另外，请确保图像的尺寸不超过上面的矩阵中提到的尺寸。

您可以通过添加console.log(file.size)

来检查尺寸

.then(response => {
  if (response) {
    const file = new Blob([response.data], {type:'image/png'})
    console.log(file.size) // !!! this line
    return file
  }