在前端开发中，操作文件是一项很常见的任务，而 filereader 正是一个能够在浏览器端读取本地文件并在页面中显示的 npm 包。本文将详细介绍 filereader 的使用，包括安装、引入、使用、示例代码等内容。
安装 filereader
filereader 是一个 npm 包，需要使用 npm 安装。在命令行中输入以下指令，即可完成安装：
--- ------- ---------- ------
引入 filereader
安装完成后，我们需要将 filereader 引入项目中。有两种方式可以实现：
- 在 js 文件中使用
require引入：
----- ---------- - ----------------------
- 在 HTML 文件中使用
script标签引入：
------- --------------------------------------------------------------
不管使用哪种方式，建议将 filereader 引入 common.js 代码中，以便于整个项目使用。
使用 filereader
引入后，我们就可以开始使用 filereader 了。下面是一个 filereader 的常规使用方式。
----- ----- - --------------------------------------------- -- -- ----- --
----- ------ - --- ------------- -- -- ---------- --
-- --------
------------- - --------------- -
-------------------- --------------------- -- ------
--
-------------------------------- ---------- -
----- ---- - -------------- -- ---------
-- ------ -
------------------------ -- -----------------
-
---上述代码中，我们首先通过 querySelector 获取了一个 input[type="file"] 元素，然后创建了一个 filereader 实例。接着，我们为 reader 对象绑定了一个 onload 事件，用于在文件读取完成后输出文件内容。最后，我们通过 addEventListener 绑定了一个 change 事件，在用户选择了文件之后，使用 filereader.readAsText() 方法读取文件并将其内容输出到控制台。
filereader 示例代码
下面是一个使用 filereader 的完整代码示例。
--------- -----
------
------
----- --------------- --
----------------- ----------
-------
------
------ ----------- --
------- --------------------------------------------------------------
--------
----- ----- - --------------------------------------------- -- -- ----- --
----- ------ - --- ------------- -- -- ---------- --
-- --------
------------- - -------- ------- -
-------------------- --------------------- -- ------
--
-------------------------------- -------- -- -
----- ---- - -------------- -- ---------
-- ------ -
------------------------ -- -----------------
-
---
---------
-------
-------在上述代码中，我们在 body 标签中添加了一个 input[type="file"] 元素，然后在 script 标签中引入了 filereader，并对 input 元素绑定了 change 事件。当用户选择了文件后，我们就使用 filereader 的 readAsText() 方法读取文件，并将文件内容输出到控制台。
总结
filereader 是一个非常实用的 npm 包，可以帮助我们在网页中读取并显示本地文件内容。本文介绍了 filereader 的安装、引入、使用以及示例代码等内容，希望能够帮助读者更好的掌握 filereader 的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedad9db5cbfe1ea0610cc3