web-dev-qa-db-ja.com

Axiosを使用して画像をダウンロードし、base64に変換します

リモートサーバーから.jpgイメージをダウンロードし、base64形式に変換する必要があります。 HTTPクライアントとしてaxiosを使用しています。サーバーに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));
javascriptaxios
32
Hobbyist

これは私にとってはうまくいきました：

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

これを行うためのより良い方法があるかもしれませんが、私はこれを次のように行いました（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出力に何かがあるはずです。

11
bjunc

これは私のために働くものです（Buffer.fromで）-

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