Télécharger une image à l'aide d'Axios et la convertir en base64

J'ai besoin de télécharger un .jpg image à partir d'un serveur distant et de le convertir en un format base64. Je suis à l'aide d'axios que mon client HTTP. J'ai essayé de délivrer un git demande au serveur et la vérification de la response.data toutefois, il ne semble pas fonctionner comme ça.

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

Lien en base64 de mise en œuvre: https://www.npmjs.com/package/base-64

Je suis en utilisant NodeJS /Réagir de façon atob/btoa ne fonctionne pas, hense 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));
Avez-vous essayé de changer responseType-à-dire blob? De docs "// responseType indique le type de données que le serveur répond avec des"

OriginalL'auteur Hobbyist | 2017-01-25

  1. 45

    Cela a très bien fonctionné pour moi:

    function getBase64(url) {
  return axios
    .get(url, {
      responseType: 'arraybuffer'
    })
    .then(response => new Buffer(response.data, 'binary').toString('base64'))
}
    Cela fonctionne parfaitement bien! Je upvote 100 fois si je le pouvais!
    si vous utilisez react-native, ajoutez à cela le haut de vos fichiers: global.Buffer = global.Buffer || require('buffer').Buffer
    Merci, fonctionne très bien! Si vous mettez le base64 dans <img src="" ... alors n'oubliez pas de préfixe de la chaîne base64 avec des "data:image/jpeg;base64, "

    OriginalL'auteur sean-hill

  2. 9

    Il pourrait y avoir une meilleure façon de le faire, mais j'ai fait comme ceci (sans les extra comme 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);

        }
    });

    J'ai un soupçon qu'au moins une partie de votre problème est peut-être côté serveur. Même sans fixation { responseType: "blob" } vous avez dû avoir quelque chose dans votre response.data de sortie.

    excellente solution, merci pour économiser mon temps

    OriginalL'auteur bjunc