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

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

需求

为什么今天会想到写这个预览本地文件的博客呢，因为在工作中遇到了问题😅😅😅

需要上传图片
在图片上传之前，需要展示出来图片
之前的上传图片实现是图片上传成功以后返回url，然后根据url再展示图片

这就是目前需要实现的功能。要实现这个功能，我目前感觉必须要实现网页可以预览本地图片，因为图片在展示的时候根本还没有上传，并没有图片地址这一说

网上一搜，果然html5的强大体现出来的，有原生API就可以实现————FileReader。

FileReader方法

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

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

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

readAsBinaryString： 该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。（下面没用到。。。尴尬。。）

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

FileReader事件

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

onabort，中断时触发
onerror，出错时触发
onload，文件读取成功完成时触发
onloadend，读取完成触发，无论成功或失败
onloadstart，读取开始时触发
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来预览的需求了。

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

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