将图片转为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 中