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

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

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

        专题图片
        

            

                
            
            
        
    

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事件。