Question

我需要从远程服务器下载.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));

Answer 1

这对我很有用：

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

Answer 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输出也应该有。

Answer 3

这是对我有用的（与Buffer.from一起使用）-

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

Answer 4

您可以将 blob 从 FileReader api 转换为 base64，然后显示。

 const fileReaderInstance = new FileReader();
 fileReaderInstance.readAsDataURL(blob); 
 fileReaderInstance.onload = () => {
 base64data = fileReaderInstance.result;                
 console.log(base64data);
 }

并将其显示为：

   <Image source={{uri: base64ImageData}} />

使用Axios下载图像并将其转换为base64

4 个答案: