前端图片转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事件，从而执行相应的事件处理函数。