【场景实现】React+material-ui+typescript实现H5上传身份证后显示图片 ，FileReader.readAsDataURL()方法读取图像信息

原理

readAsDataURL方法用于读取指定的内容File。读取操作完成后，readyState变成DONE，并loadend触发。那时，该result属性包含数据作为数据：URL表示文件数据为base64编码的字符串。

举个栗子

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript

function previewFile() {
   
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
   
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
   
    reader.