前言
在现代 Web 开发中，上传文件是一个很常见的任务。然而，实现一个良好的文件上传功能需要考虑很多细节，比如文件大小、文件类型、上传进度显示等等。为了避免重复造轮子，我们可以使用一些现有的 npm 包来简化这个过程。其中一款值得推荐的 npm 包是 brws-upload。
brws-upload 是什么？
brws-upload 是一个基于 XMLHttpRequest 的文件上传库。它支持多文件上传、断点续传，并且可以自定义上传 UI。而且，由于它是使用 TypeScript 编写的，所以在使用时也有良好的类型提示。
如何使用？
首先，我们需要使用 npm 进行安装：
npm install brws-upload
然后，在你的代码中引入该库：
import BRWSUpload from 'brws-upload';
接着，我们可以初始化一个 BRWSUpload 实例：
-- -------------------- ---- -------
----- -------- - --- ------------
---- --------------
------- -------
----------- ---------- -- -
---------------------------------
--
----------- ---------- -- -
-------------------------------------
--
-------- ------- -- -
-------------------------------
-
---初始化 brws-upload 实例时，需要传入几个参数：
- url：上传文件时的服务器地址。
- method：HTTP 请求的方法。
- onProgress：上传进度回调函数，每次上传进度更新时会被调用，参数 progress 表示上传进度（0~100）。
- onComplete：上传成功回调函数，参数 response 表示服务器返回的数据。
- onError：上传失败回调函数，参数 error 表示发生的错误。
接下来，我们可以选择添加要上传的文件：
const fileInput = document.querySelector('#file-input');
fileInput.addEventListener('change', () => {
const files = fileInput.files;
uploader.addFiles(files);
});这里我们通过监听文件上传的 <input> 元素的 change 事件，获取选择的文件，并使用 BRWSUpload 实例的 addFiles 方法将文件添加进上传队列中。
最后，我们可以启动上传：
const startBtn = document.querySelector('#start-btn');
startBtn.addEventListener('click', () => {
uploader.start();
});这里我们监听上传按钮的 click 事件，并使用 BRWSUpload 实例的 start 方法来启动上传。
断点续传
断点续传是一种比较高级的上传功能，它可以在上传过程中出现断网等问题时，续传上次上传的文件。brws-upload 内置了对断点续传的支持，只需要在初始化实例时添加一个 enableResume 参数即可：
-- -------------------- ---- -------
----- -------- - --- ------------
---- --------------
------- -------
------------- ----- -- ------
----------- ---------- -- -
---------------------------------
--
----------- ---------- -- -
-------------------------------------
--
-------- ------- -- -
-------------------------------
-
---上传 UI 定制
brws-upload 也支持自定义上传 UI，这意味着我们可以根据自己的需求，自由地定制上传进度条、上传按钮等。
-- -------------------- ---- -------
----- ---------- - ------------------------------------
----- ----- - ---------------------------------
----- --------- - -------------------------------------
----- --------- - --------------------------------------
----- -------- - --- ------------
---- --------------
------- -------
----------- ---------- -- -
----------------- - ---------------
------------------- - ---------------
--
----------- ---------- -- -
-------------------------------------
--
-------- ------- -- -
-------------------------------
-
---
----------------------------------- -- -- -
----- ----- - ----------------
-------------------------
-----------------
---这里我们自定义了一个进度条的样式，并在上传的过程中，通过上传进度回调函数来更新进度条的样式。
总结
以上就是 brws-upload 的使用教程。这个库功能强大，支持多种上传文件的参数配置，而且使用起来也很简单。如果你正在开发一个需要上传文件的 Web 应用，那么 brws-upload 是一个值得考虑的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52bc