简介
samjs-files-upload 是 npm 上一款非常实用的前端上传文件插件，可以实现文件的多种上传方式，并且支持文件类型、大小校验等功能。
安装
在命令行中使用 npm 进行安装：
npm install samjs-files-upload --save
使用方法
导入模块
在需要使用 samjs-files-upload 的页面中引入模块：
import Upload from "samjs-files-upload";
创建实例
在页面中创建一个 Upload 实例，并将相关配置传入：
-- -------------------- ---- ------- ----- -------- - --- -------- --- ---------- ---- -------------------------------- --------- ----- ------------ ---- - ---- - -- ------- -------------- ------------ ------------------- --------------- -------------- --- ----------- -------------- -------- --- ---------- -------------- --------- --- -------- -------------- --------- --- ----------- ------------------ -- ---
配置选项
以下是 Upload 构造函数的可配置选项：
| 选项 | 默认值 | 描述 |
|---|---|---|
| el | 无 | 必选，指定上传组件所在的 DOM 元素，可以是 ID 、class 或标签名 |
| url | 无 | 必选，指定上传文件的服务器 URL |
| multiple | true | 可选，是否支持多文件上传 |
| maxFileSize | 10MB | 可选，限制上传文件大小，单位为字节 |
| accept | [] | 可选，指定可上传文件的格式，是一个 MIME 类型数组 |
| onBeforeUpload | 无 | 可选，上传前执行的回调函数，参数为当前正在上传的文件 |
| onProgress | 无 | 可选，上传过程中执行的回调函数，参数为当前正在上传的文件和当前进度百分比 |
| onSuccess | 无 | 可选，上传成功后执行的回调函数，参数为当前上传的文件和服务器返回的响应数据 |
| onError | 无 | 可选，上传失败后执行的回调函数，参数为当前上传的文件和错误信息 |
| onComplete | 无 | 可选，上传完成后执行的回调函数，参数为服务器返回的响应数据 |
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ------------
-------
------
---- ------------------
------- --------------
------ ------ ---- ---------------------
----- -------- - --- --------
--- ----------
---- ----------
--------- -----
------------ ---- - ---- - --
------- -------------- ------------ -------------------
--------------- -------------- -
-------------------- -----------
--
----------- -------------- -------- -
-------------------- ---------- ------- -------- -----
--
---------- -------------- --------- -
-------------------- ---------- --------- ----------
--
-------- -------------- --------- -
-------------------- ---------- --------- ----------
--
----------- ------------------ -
-------------------- ----------
-
---
---------
-------
-------总结
samjs-files-upload 是一款非常实用的前端文件上传插件，可以满足大部分上传场景的需求。使用时只需要创建一个 Upload 实例，并传入相关的配置选项即可。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5a81e8991b448db211