使用Axios下载图像并将其转换为base64。
使用Axios下载图像并将其转换为base64。
我需要从远程服务器下载一个.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); // 空
console.log(response.data == null); // False
console.log(base64.encode(response.data); // 空
}).catch(err => console.log(err));
问题出现的原因是作者想要使用Axios下载一张图片并将其转换为base64格式，但是他遇到了一些问题。他尝试使用了以下代码：
function getBase64(url) {
return axios
.get(url, {
responseType: 'arraybuffer'
})
.then(response => Buffer.from(response.data, 'binary').toString('base64'))
}
然而，当他尝试运行代码时，他遇到了一个警告信息：DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.。
为了解决这个问题，他询问了关于Buffer.from的文档在哪里可以找到。一位回答者建议作者使用Buffer.from(response.data, 'binary')来代替Buffer(response.data, 'binary')。
另外，还有一些其他的问题和解决方法。某些情况下在使用react-native时，需要在文件的顶部添加global.Buffer = global.Buffer || require('buffer').Buffer。还有人注意到在将base64字符串放入<img src="" ...>中时，需要在base64字符串前加上"data:image/jpeg;base64, "。
此外，还有人指出，这种方法在返回的内容不是图片（例如，是一个包含成功状态码的HTML页面，例如，来自重定向）时会出现问题。他建议需要检查buffer是否是一个实际的图片。
对于使用react-script v5的用户，还有人指出需要先安装buffer依赖项并导入它：npm install buffer。
最后，有人感谢问题提出者和回答者，指出这个问题虽然很小，但是节省了很多时间和努力。他建议将回答标记为已接受的答案。
问题原因：可能是因为服务器端的问题导致无法正确获取到服务器返回的图片数据。
解决方法：使用Axios库发送GET请求获取图片数据，并将其转换为base64格式。具体的代码如下：
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);
}
});
其中，`axios.get`用于发送GET请求，`{ responseType: "blob" }`指定了响应的数据类型为blob。接着，通过`FileReader`将blob数据转换为base64格式，并将结果设置为图片元素的src属性值，实现了将图片下载并转换为base64格式的功能。
作者怀疑问题可能是由于服务器端的原因导致无法正确获取到服务器返回的图片数据。即使不设置`{ responseType: "blob" }`，也应该能够在`response.data`中获取到一些内容。
通过漫长的搜索，作者找到了解决方法，感谢大家的帮助。
非常好，谢谢。还需要注意的是需要给`load`事件添加一个事件监听器。这对于在将数据读取到FileReader实例后获取结果是必要的。
