将图片转为base64

DEMO：

<input type="file" id="file"  multiple="multiple">
<div id="imgDiv"></div>
<div id="showDataUrl" style="width:50%; word-wrap:break-word;"></div>
<script>
if(window.FileReader){
    //处理文件
    console.log('支持 filereader');
    //css设置
    var _body=document.body;
    _body.style.backgroundColor='#000';
    _body.style.color='#fff';

    var result = document.getElementById("result");
    var _file = document.getElementById("file");
    _file.onchange=function(){
        var file = _file.files[0]
        var reader=new FileReader();  

        reader.readAsDataURL (file);
        reader.onload=function (e){
            imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>';
            showDataUrl.innerHTML=this.result;
        }
    }
}else{
    console.log('不支持 filereader');
}

生成文件可贴到浏览器直接看效果。

参考文献：https://blog.csdn.net/webxiaoma/article/details/70053444

参考文章内容：

二、利用 html5 的 FileReader 将图片转化base64格式 
FileReader 是H5提供的一个处理文件的API， 
① 判断浏览器是否支持FileReader

② FileReader 接口有四个方法：

readAsBinaryString (file) 将文件读取为二进制码
readAsDataURL (file) 将文件读取为 DataURL
readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式，一般默认是UTF-8)
about 中断读取

③ FileReader还提供给了一些事件：

• onabort 中断时触发
• onerror 出错时触发
• onload 文件读取成功完成时触发
• onloadend 读取完成触发，无论成功或失败
• onloadstart 读取开始时触发
• onprogress 读取中

注意：重点内容
FileReader 读取后的文件不会返回给FileReader 本身， 而是存储在了 result 中