前言
在 web 开发中，文件上传是一个非常常见的需求，但是浏览器原生的文件上传能力并不是非常方便易用，虽然有很多开源的前端文件上传组件，但是选择哪一个也是一件困难的事情。今天我们要介绍的是一个用于前端文件上传的 npm 包 t-mput。
什么是 t-mput
t-mput 是一个轻量级的前端文件上传组件，支持文件断点续传和限制上传文件大小。它可以与任何后端进行对接，只需要少量配置即可完成对应的上传需求。
安装 t-mput
你可以通过 npm 安装 t-mput
npm install t-mput
也可以将以下 script 标记添加到 HTML 头部，在浏览器环境下使用 t-mput：
<script src="https://unpkg.com/t-mput/dist/t-mput.min.js"></script>
使用 t-mput
引入 t-mput
在你的项目中，通过 import 或 require 引入 t-mput，并且进行必要的配置。
-- -------------------- ---- ------- ------ --- ---- --------- ----- -- - --- ----- ---- ---------- ------------ - - ---- - ----- -- ------- --- ------------------- ------- - -------------------- -------- -------- -- ----------- - --------------------- -- -------------- - ---------------------- ------- -- ---展开代码
添加 DOM 节点和事件监听
在页面中添加创建上传按钮，并绑定 onClick 事件。
-- -------------------- ---- ------- ------ ----------- --------------- -- ------- ----------------------------- -------- ----- --------- - -------------------------------------- ----- --------- - -------------------------------------- -- ---------- ----------------------------------- -- -- - ------------------------------ --- ---------展开代码
开始上传文件
当用户选择文件并点击上传按钮时，通过 tm.upload 方法开始上传文件。
// 点击上传按钮开始上传 uploadBtn.addEventListener('click', () => { tm.upload(fileInput.files[0]); });
其他方法和事件
- tm.abort() 终止上传
- tm.onBeforeUpload(xhr, data) 发送文件之前的 hook 事件
- tm.onAbort() 取消上传的 hook 事件
总结
通过 t-mput 这个 npm 包，我们可以轻松解决前端文件上传的一系列问题。t-mput 支持文件断点续传、限制文件大小、可以与任何后端对接，非常方便易用。希望本文可以对你有所指导意义，如果有问题欢迎交流讨论。
示例代码
完整的示例代码可参考以下链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560be81e8991b448df060
