SOURCE

var file=document.querySelector("#file");
file.addEventListener('change',function(e){
  let fs=e.target.files;
  convert2DataUrl(fs);
})
function convert2DataUrl(fs){
  var strHtml='',
      strData='';
  for(let file of fs){
    var reader= new FileReader();
    reader.readAsDataURL(file);
    reader.onload=function(e){
      strHtml += `<tr>
									<td><span><img src=${e.target.result} width='20px'></span></td>
      						<td><textarea>${e.target.result}</textarea></td>
									</tr>`;
      document.querySelector('#show').innerHTML=strHtml;
      document.querySelector('#showStr').innerHTML=strData;
    }
  }
}

<h1>图片转dataURl</h1>
<h3>支持多张图片,图片最好控制在10-20kB之内</h3>

<div style="display: block">
          <p style="height:0; line-height:30px; text-align:center">请选择文件</p>
        <input type='file' style="width: 100%; position: relative; height: 100%;top:-20px; opacity: 0" id='file' >
        </div>
<table id='show'></table>
<p>图片显示出来后，复制文本框的字符串即可</p>

div{
width:300px;
height:30px;
background:#ddd;
border-radius:15px;
box-shadow:#aaa 3px 3px 5px
}