Загрузите изображение с помощью Axios и преобразуйте его в base64

Мне нужно загрузить изображение .jpg с удаленного сервера и преобразовать его в формат base64. Я использую axios как мой HTTP-клиент. Я попытался выдать запрос git на сервер и проверить response.data, однако он не работает так.

Ссылка на axios: https://github.com/mzabriskie/axios

Ссылка на реализацию base64: https://www.npmjs.com/package/base-64

Я использую NodeJS/React, поэтому atob/btoa не работает, узнайте библиотеку.

axios.get('http://placehold.it/32').then(response => {
    console.log(response.data); // Blank
    console.log(response.data == null); // False 
    console.log(base64.encode(response.data); // Blank
}).catch(err => console.log(err));

Ответы

Ответ 1

Это сработало отлично для меня:

function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => new Buffer(response.data, 'binary').toString('base64'))
}

Ответ 2

Там может быть лучший способ сделать это, но я сделал это так (минус дополнительные биты, такие как catch() и т.д.):

axios.get(imageUrl, { responseType:"blob" })
    .then(function (response) {

        var reader = new window.FileReader();
        reader.readAsDataURL(response.data); 
        reader.onload = function() {

            var imageDataUrl = reader.result;
            imageElement.setAttribute("src", imageDataUrl);

        }
    });

У меня есть подозрение, что по крайней мере часть вашей проблемы может быть серверной. Даже без установки { responseType: "blob" } у вас должно было быть что-то на выходе response.data.

Ответ 3

Это то, что работает для меня (с Buffer.from) -

axios
  .get(externalUrl, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const buffer = Buffer.from(response.data, 'base64');
  })
  .catch(ex => {
    console.error(ex);
  });