Download an image using Axios and convert it to base64

javascript axios
Hobbyist picture Hobbyist · Jan 25, 2017 · Viewed 66.7k times · Source

I need to download a .jpg image from a remote server and convert it into a base64 format. I'm using axios as my HTTP client. I've tried issuing a git request to the server and checking the response.data however it doesn't seem to work like that.

Link to axios: https://github.com/mzabriskie/axios

Link to base64 implementation: https://www.npmjs.com/package/base-64

I'm using NodeJS / React so atob/btoa doesn't work, hense the library. 

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

Answer

sean-hill picture sean-hill · May 19, 2017

This worked great for me:

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

Related questions

How to set header and options in axios?

I use Axios to perform an HTTP post like this: import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers) Is this correct? Or should I do: axios.post(url, params: …

Read More
How to post a file from a form with Axios

Using raw HTML when I post a file to a flask server using the following I can access files from the flask request global: <form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data> <…

Read More
How can I get the status code from an http error in Axios?

This may seem stupid, but I'm trying to get the error data when a request fails in Axios. axios.get('foo.com') .then((response) => {}) .catch((error) => { console.log(error) //Logs a string: Error: Request failed with status code 404 }) …

Read More