JS前端网页选择图片后，将其图片转换成Base64编码并展示预览

这篇文章也是和以前一样哈，网上很多你可能试过了，那就看这篇啦！

1.这是我前端的代码，有一个img标签，用来显示图片用的，还有一个 input type是file的输入框，其实就是选择图片的：

<div class="layui-form-item">
        <label class="layui-form-label">专题图片</label>
        <div class="layui-input-inline">
            <div class="layui-upload-list">
                <img class="layui-upload-img" name="titleBase64Img" id="base64Img" src="" style="display: none" width="300px" height="100px;">
            </div>
            <input type="file" id="image" lay-verify="required" onchange="toBase64()" accept="image/jpeg,image/png,image/jpg" class="layui-upload-button">
        </div>
    </div>

2.前端展示效果是这样的，可以看到直接是选择文件，img控件是隐藏的：

3.我们写个js方法，用来监听“选择文件”按钮的事件，以便拿到图片资源后，立即将图片转换成base64编码，并且在img控件中展示其效果：

function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            $("#base64Img").attr("style","display:inline-block");
            $("#base64Img").attr("src",reader.result);
            console.log(reader.result);
        }
        if (file) {
            reader.readAsDataURL(file);
        }
    }

4.效果：

控制台打印出来了base64：

 

注意：主要是JS这段代码，HTML代码我里面加了样式，你可以只保留img和input标签就好了，注意onchange事件。