在现代的 Web 应用中，文件上传是必不可少的功能。在前后端分离的架构中，前端上传文件通常通过 Ajax 的方式提交到后端程序。为了方便开发，我们可以使用第三方的上传组件。simple-uploader-zjz 就是其中一个经典的 npm 包。
简介
simple-uploader-zjz 是一个面向现代浏览器的、轻量的、易用的上传组件。它使用原生的 XMLHttpRequest 实现文件的上传。simple-uploader-zjz 的特点包括：
- 轻量：simple-uploader-zjz 的核心代码只有不到 100 行，依赖项也很少。
- 易用：simple-uploader-zjz 支持链式调用的 API，使用简单直观。
- 可扩展性：simple-uploader-zjz 提供了上传前、上传中、上传成功和上传失败的回调函数，便于定制上传的流程和行为。
安装
simple-uploader-zjz 是一个 npm 包，可以使用 npm 或 yarn 安装。在项目的根目录下，执行以下命令：
--- ------- ------------------- ------ - -- ---- --- -------------------
使用
使用 simple-uploader-zjz 的步骤如下：
- 创建一个 Uploader 实例。
- 配置上传的参数。
- 绑定上传文件的事件。
- 调用 upload() 方法执行上传。
创建 Uploader 实例
在 JavaScript 中，创建 Uploader 实例的方法如下：
------ -------- ---- --------------------- ----- -------- - --- ---------- ------- ---------- -- ----- --- --
在 TypeScript 中，创建 Uploader 实例的方法如下：
------ --------- - --------------- - ---- --------------------- ----- -------- --------------- - - ------- ---------- -- ----- --- - ----- -------- - --- -----------------
配置上传的参数
simple-uploader-zjz 的参数配置非常简单。只需要设置几个属性即可。
| 属性 | 类型 | 说明 |
|---|---|---|
| target | string | 上传的目标 URL |
| fileKey | string | 上传的文件参数名 |
| chunkSize | number | 分片上传的块大小 |
| maxThreads | number | 最大上传线程数 |
| headers | Record<string, string> | 上传时附带的请求头 |
| withCredentials | boolean | 是否带上 cookie |
下面是一个完整的参数配置示例：
----- -------- - --- ----------
------- ----------
-------- -------
---------- ---- - -----
----------- --
-------- -
------------------- -----------------
--
---------------- -----
--绑定上传
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5451ab1864dac66973