概述
在前端开发中，文件操作是非常常见的一个场景。而 vue-read-file 是一款基于 Vue.js 的文件读取工具库，它能够帮助我们快速读取本地文件，并将内容转换为字符串、ArrayBuffer、DataUrl等。
安装
使用 npm 进行安装：
npm install vue-read-file
使用
1. 引入
在需要使用的组件中，引入 vue-read-file：
import Vue from 'vue' import VueReadFile from 'vue-read-file' Vue.use(VueReadFile)
2. 配置
在需要读取文件的组件中，定义一个 file 对象，并在 created 钩子中进行组件初始化：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
----- -
----- ---
-------- -----
----- ---
--
-
--
--------- -
------------------------------ -
------- ------- -- ----
----------- ------ -- ------
------------ ------ -- --------
--
--
-3. 操作
在组件中，通过点击一个上传按钮，触发选择文件的弹窗。选择文件后，会自动将文件的信息存储到 file 对象中：
-- -------------------- ---- -------
----------
-----
------ ----------- -------------------------- --
------
-----------
--------
------ ------- -
-------- -
------------------- -
--------- - -------------------------
--
--
-
---------选择文件后，我们可以通过以下方式获取文件内容：
1. 字符串
console.log(this.file.content.text)
2. ArrayBuffer
console.log(this.file.content.arrayBuffer)
3. DataUrl
console.log(this.file.content.dataUrl)
示例代码
-- -------------------- ---- -------
----------
-----
------ ----------- -------------------------- --
---- --------------------
--------- -- --------- -------
--------- -- --------- -------
----------- -- ----------------- ------
------
------
-----------
--------
------ ------- -
------ -
------ -
----- -
----- ---
-------- -----
----- ---
--
-
--
--------- -
------------------------------ -
------- -------
----------- ------
------------ ------
--
--
-------- -
------------------- -
--------- - -------------------------
--
--
-
---------总结
以上便是 vue-read-file 的使用方法。实现了点击按钮上传本地文件，并将其内容以字符串、ArrayBuffer、DataUrl等形式展现。vue-read-file 的封装让文件操作变得简单而有趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c6181e8991b448ebe0c