Скачать изображение с помощью Axios в React?

Question

Я пытаюсь загрузить изображение с помощью GET-запроса в Axios, а затем загрузить его на ПК пользователя.Мне нужно использовать Axios, поскольку запрос на получение имеет заголовок авторизации.

Ниже у меня есть функция загрузки изображения и сохранения его в виде большого двоичного объекта:

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")

При загрузке файла появляется сообщение об ошибке

"Failed - Network Error"

ЕслиЯ смотрю в опцию разработчика Chrome, я вижу запрос GET к API, и на вкладке предварительного просмотра я вижу изображение.

Любые предложения относительно того, где я иду не так?

Answer 1

Это означает, что axios работает нормально, однако программа сохранения файлов не выполняет загрузку.

Изучая файл readme для репозитория файлов , вы можете увидеть поддерживаемые браузеры:

Таким образом, попробуйте обновить текущий браузер или протестировать с другим браузером.Также убедитесь, что размер изображения не превышает размеры, указанные в приведенной выше матрице.

Размер можно проверить, добавив 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
  }