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

椰卤工程师

于 2020-12-02 16:28:50 发布

阅读量1.3k

点赞数

分类专栏：超级避坑指难 React 移动多端文章标签： typescript reactjs material-ui

本文链接：https://blog.csdn.net/weixin_42224055/article/details/110484057

版权

原理

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.