abhi-uploader 是一个轻便的前端上传工具，可以方便地实现文件上传功能。
安装
使用 npm 进行安装：
--- ------- -------------
使用
实例化
在 JavaScript 中，可以通过以下代码来实例化 abhi-uploader：
--- -------- - --- ---------------------
其中，config 为配置信息。
配置
abhi-uploader 提供了以下配置选项：
url
- 类型：
string - 默认值：
null
上传文件的地址，必填。
method
- 类型：
string - 默认值：
POST
上传文件时使用的 HTTP 请求方法（GET 或 POST）。
fieldName
- 类型：
string - 默认值：
file
上传文件的字段名。
headers
- 类型：
Object - 默认值：
null
上传文件时发送的 HTTP 请求头。
data
- 类型：
Object - 默认值：
null
上传文件时发送的额外数据。
fileSize
- 类型：
Number - 默认值：
0
上传文件的最大尺寸，单位为字节。如果文件大小超出限制，则不进行上传。
extensions
- 类型：
Array - 默认值：
[]
上传文件的允许扩展名列表。如果文件扩展名不在列表中，则不进行上传。
beforeSend
- 类型：
function(xhr, formData) - 默认值：
null
在发送 HTTP 请求之前被调用的函数。可以用它来修改请求头或请求数据。
方法
upload
- 作用：上传文件。
- 用法：
uploader.upload()。
cancel
- 作用：取消上传。
- 用法：
uploader.cancel()。
onProgress
- 作用：设置上传进度监听函数。
- 用法：
uploader.onProgress(callback)。
onSuccess
- 作用：设置上传成功处理函数。
- 用法：
uploader.onSuccess(callback)。
onError
- 作用：设置上传失败处理函数。
- 用法：
uploader.onError(callback)。
示例代码
--------- -----
------
------
-------------------- ------------
-------
------
------ ----------- ------------
------- --------------------------
------- ----------------------------------------------------------------
--------
--- ------ - -
---- ----------
------- -------
---------- -------
-------- -
---------------- ------- ----
--
----- -
---------- -----
--
--------- ---- - ---- - --- -- -- --
----------- ------- ------- ------ ------
--
--- -------- - --- ---------------------
-------------------------------------------------------------- ---------- -
--- ---- - -------------------------------------------
-- ------ -
--------------------- -
----------- ---------------- ------ -
------------------- - ------ - --- - -------
--
---------- ------------- -
------------------- - -----
--
-------- ------------- -
--------------------- - -----
-
---
-
---
---------
-------
-------该示例代码演示了如何使用 abhi-uploader 实现文件上传功能。上传时会检查文件大小和扩展名是否符合要求，可以设置 HTTP 请求头和额外数据，以及监听上传进度和上传结果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cd181e8991b448e6617