前端图片转base64 方法
前端可以使用FileReader对象的readAsDataURL方法将图片文件转换为base64编码。
示例代码如下:
// 获取文件对象
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// 实例化FileReader对象
var reader = new FileReader();
// 读取文件内容
reader.onload = function(e) {
// 转换结果在e.target.result中
var base64Image = e.target.result;
// 使用base64Image进行后续操作
console.log(base64Image);
};
// 以DataURL方式读取文件
reader.readAsDataURL(file);
在示例代码中,我们首先通过id获取到文件输入框的DOM元素,然后获取选中的文件对象。
接下来,我们实例化FileReader对象,并通过其onload事件监听文件内容读取完成的事件。
在事件处理函数中,我们可以通过e.target.result获取到转换后的base64编码字符串,然后可以使用该字符串进行后续操作。
最后,我们调用FileReader对象的readAsDataURL方法,以DataURL方式读取文件内容。读取完成后,会触发onload事件,从而执行相应的事件处理函数。