web-dev-qa-db-fra.com

Téléchargez une image avec Axios et convertissez-la en base64

Je dois télécharger une image .jpg à partir d'un serveur distant et la convertir au format base64. J'utilise axios comme client HTTP. J'ai essayé d'envoyer une requête git au serveur et de vérifier le response.data cependant cela ne semble pas fonctionner comme ça.

Lien vers axios: https://github.com/mzabriskie/axios

Lien vers l'implémentation base64: https://www.npmjs.com/package/base-64

J'utilise NodeJS/React donc atob/btoa ne fonctionne pas, mais la bibliothèque.

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));
javascriptaxios
32
Hobbyist

Cela a bien fonctionné pour moi:

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

Il y a peut-être une meilleure façon de faire cela, mais je l'ai fait comme ceci (moins les bits supplémentaires tels que catch(), etc.):

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

        }
    });

Je soupçonne qu'au moins une partie de votre problème pourrait être côté serveur. Même sans réglage { responseType: "blob" } vous devriez avoir quelque chose dans votre response.data sortie.

11
bjunc

C’est ce qui fonctionne pour moi (avec Buffer.from) -

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