一般情况下图片都是后台处理后返回给前端图片网络地址甚至base64流，还有很多项目上将图片存在了三方的云存储服务也是非常的便捷和易于管理，有的时候会有前端生成base64的需求，无论要实现什么，本篇主要讲原生javascript将图片转为base64的案例。
完整案例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生JS将图片转base64案例</title>
</head>
<body>
<div class="upload-img">
<img id="img">
<input type="file" id="img-select">
</div>
<script type="text/javascript">
function imgPreview() {
if (!/.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(this.value)) {
alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种!')
return false
}
var files = this.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function() {
var result = this.result;
document.getElementById('img').src = result; //img的id
console.log('base64',result)
};
reader.readAsDataURL(file);
}
document.getElementById('img-select').addEventListener('change', imgPreview);
</script>
</body>
</html>
实例里将base64在控制台console输出了下，大家可以看一下，并在此准备了图片转base64在线工具。
你可能需要以下内容：
原生js将图片转为base64案例，
vue里将图片转为base64流编码，
element Ui将图片转为base64的实例