前端战五渣学前端——FileReader预览本地文件

距离上一篇博客将近一个半月了，这一个多月有点烦躁，静不下心来学习，也不知道为何，玩的也不算太好，还感冒。多是天气热了吧，有点点躁动。上周看了《哪吒——魔童降世》还不错，还看了新出的《蜘蛛侠：英雄远征》，从彼得帕克身上看到了钢铁侠的影子，非常激动哦！

需求

为何今天会想到写这个预览本地文件的博客呢，由于在工做中遇到了问题😅😅😅

1. 须要上传图片
2. 在图片上传以前，须要展现出来图片
3. 以前的上传图片实现是图片上传成功之后返回url，而后根据url再展现图片

这就是目前须要实现的功能。要实现这个功能，我目前感受必需要实现网页能够预览本地图片，由于图片在展现的时候根本尚未上传，并无图片地址这一说

网上一搜，果真html5的强大致现出来的，有原生API就能够实现————FileReader。

FileReader方法

FileReader的实例拥有4个方法，其中3个是用来读取文件，另外一个是用来中断读取（目前我没有用过这个方法😃没有需求~）。咱们须要注意的是无论读取成功或者失败，这几个方法都不会直接返回读取结果，而是在result属性中（后面会提到）

1. abort方法，参数none，终端读取
2. readAsBinaryString方法，参数file，将文件读取为二进制码
3. readAsDataURL方法，参数file，将文件读取为DataURL
4. readAsText方法，参数file, [encoding]，将文件读取为文本

readAsText： 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法很是容易理解，将文件以文本方式读取，读取的结果便是这个文本文件中的内容。

readAsBinaryString： 该方法将文件读取为二进制字符串，一般咱们将它传送到后端，后端能够经过这段字符串存储文件。（下面没用到。。。尴尬。。）

readAsDataURL： 该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件一般是指图像与 html 等格式的文件。（其实图片的话就是转成base64的格式）

FileReader事件

FileReader拥有提供了整个流程的事件模型，方便咱们在读取文件的各个阶段来进行本身想执行的方法

1. onabort，中断时触发
2. onerror，出错时触发
3. onload，文件读取成功完成时触发
4. onloadend，读取完成触发，不管成功或失败
5. onloadstart，读取开始时触发
6. onprogress，读取中

基本的流程就是呢~ onloadstart>onprogress>onload>onloadend

咱们来使用

readAsDataURL

那咱们就直接来上代码吧⬇️

<input type="file" id="file">
<img src="" alt="" id="img">
复制代码

咱们如今须要的就是咱们从<input type="file" id="file">这个标签选择的图片在不通过请求上传就能够在下面的<img src="" alt="" id="img">标签中展现出来

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件之后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟如今不是全部浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功之后执行的方法
      document.querySelector('#img').src = event.target.result; // 前面说过，成功返回的数据再result属性中，而后将这个设置成img标签的src地址
    }
  } else { // 没有FileReader的弹出警告而后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息
  reader.readAsDataURL(file); // 将文件信息转成DataUrl，这个就是转成功后执行 reader.onload 方法
})
复制代码

这样咱们就实现了不经过上传图片就能够在本地浏览图片了！

至此，咱们用到了readAsDataURL方法和onload事件，下面咱们再来看一下readAsText，也就是读取文本。

readAsText

仍是，咱们先更改html

<input type="file" id="file">
<div id="text"></div>
复制代码

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件之后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟如今不是全部浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功之后执行的方法
      document.querySelector('#text').innerHTML = event.target.result; // 前面说过，成功返回的数据再result属性中，而后将拿回来的文本添加到指定标签中
    }
  } else { // 没有FileReader的弹出警告而后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息
  reader.readAsText(file); // 将文件信息转成文本，默认是UTF-8格式，这个就是转成功后执行 reader.onload 方法
})
复制代码

新建一个txt的文件，别的文本文件应该也好使

这样咱们就实现了本地预览图片和文本的需求啦~

轻松一下

咱们来课堂延伸一下，就是咱们在获取图片的时候，实际上是转成base64的格式，而后呈如今页面中的，那咱们如今还有一个API可让图片生成一个本地的地址，而后展示出来，那就是——URL.createObjectURL()

怎么用呢？？？让咱们来看一下代码

这回咱们的html有两个img标签，方便咱们来对比

<input type="file" id="file">
<img src="" alt="" id="img">
<img src="" alt="" id="img2">
复制代码

let reader = null; // 声明reader变量方便后面使用

const fileNode = document.querySelector('#file'); // 获取input标签

fileNode.addEventListener('change', (e) => { // 为获取的input标签添加事件监听，当选择文件之后触发
  if (window.FileReader) { // 判断浏览器中有没有FileReader，毕竟如今不是全部浏览器都有FileReader
    reader = new FileReader(); // 实例化FileReader
    reader.onload = (event) => { // 设置读取成功之后执行的方法
      document.querySelector('#img').src = event.target.result; // 前面说过，成功返回的数据再result属性中，而后将这个设置成img标签的src地址
    }
  } else { // 没有FileReader的弹出警告而后返回
    alert('你的先浏览器没有FileReader，不能这么干！');
    return;
  }
  const file = e.target.files[0]; // 拿到选择的文件信息

  /* 这里是咱们用的URL.createObjectURL() */

  document.querySelector('#img2').src = URL.createObjectURL(file) // 咱们直接经过URL.createObjectURL()这个方法来把文件信息转成一个url地址

  /* end */
  reader.readAsDataURL(file); // 将文件信息转成DataUrl，这个就是转成功后执行
})
复制代码

结语

如今咱们能够实现本地预览图片、文本，以及能够生成url来预览的需求了。

日后我还会继续更新博客，记录本身在学习过成功遇到的小问题，或者学习到的新技能

---

我是前端战五渣，一个前端界的小学生。