在前端开发中，我们经常需要读取本地文件以及将其上传到服务器。为了简化这个过程，可以使用 npm 包 file-reader。本文将详细介绍如何使用该包，并提供示例代码。
安装
npm install file-reader --save
读取本地文件
要读取本地文件，可以使用 FileReader 对象。file-reader 包提供了一个方便的函数 readFile 来读取本地文件。
import { readFile } from 'file-reader'; const fileInput = document.querySelector('input[type=file]'); fileInput.addEventListener('change', async (event) => { const file = event.target.files[0]; const content = await readFile(file); console.log(content); });
上面的代码监听一个 input 元素的 change 事件，当用户选择本地文件后，将文件传递给 readFile 函数并异步等待返回的文件内容。文件内容将打印到控制台。
上传文件到服务器
要上传文件到服务器，可以使用 FormData 对象和 fetch 函数。file-reader 包提供了一个方便的函数 uploadFile 来上传文件到服务器。
-- -------------------- ---- ------- ------ - ---------- - ---- -------------- ----- --------- - ------------------------------------------- ----- ------------ - ---------------------------------------------- -------------------------------------- ----- ------- -- - ----------------------- ----- ---- - ------------------- ----- ---- - --- ----------- ------------------- ------ ----- -------- - ----- --------------------- ------ ---------------------- ---展开代码
上面的代码监听一个提交按钮的点击事件，当用户点击提交按钮时，将文件上传到服务器的 /upload 路径，并异步等待返回的响应。响应将打印到控制台。
总结
file-reader 包提供了方便的函数来读取本地文件和上传文件到服务器。这些函数可以帮助简化前端开发中处理文件的过程。建议熟练掌握 FileReader 对象、FormData 对象和 fetch 函数的使用，以便更好地使用 file-reader 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46987
