介绍
meepo-uploader 是一个基于 AngularCLI 的上传组件，可以实现上传多种类型和多种数量的文件。它提供了一些基础 ui 并可以定制各种上传逻辑，在上传时可以协助我们处理各种问题，如上传前校验，上传进度展示，上传成功失败提示等。
安装
安装可以使用 npm
npm install meepo-uploader
安装完后，在模块中加入 UploaderModule 即可使用。
import { UploaderModule } from 'meepo-uploader';
@NgModule({
imports: [
UploaderModule
]
})
export class AppModule{ }使用
在使用前，先加入我们的简单 ui
<m-upload></m-upload>
这样简单的模板就可以使用 meepo-uploader 上传组件了。为方便自定义上传的逻辑，组件提供了一些可选的参数，如自定义上传服务，参数配置，页面展示逻辑等。
-- -------------------- ---- -------
---------
-----------------
------------------------------ -------
--------------------------
-----------------------------
-----------
---------- ---
---- -------
------- -------------------- -------
---- -----------------
----- ---
-------- ---
----------- ---
----- ----------
------ -----
------- -----
--
------------参数说明
- multiple： 是否可以一次上传多个文件。
- accept： 可上传的文件类型 (用英文逗号隔开)。
- chunkSize： 如果需要分块上传时，这儿需要填写分块大小。
- maxFileSize： 最大允许上传的文件大小。
- config： 配置上传的各个参数。
- maxNumber： 最大上传数量。
- key： 文件名字。
- filter： 可以选择文件的类型 (用英文逗号隔开)。
- url： 上传的目标地址。
- data： 需要传给服务端的数据。
- headers： 需要上传的头部信息。
- previewUrl： 预览图片（使用了 preview-library.js）。
- type： 上传的类型。使用的是 CDN 的上传还是 ajax 上传。
- chunk： 是否需要分块上传。
- thumbs： 是否需要生成缩略图。
事件
组件还提供了一些事件，用于监听文件的上传状态：
<m-upload
[preview]="true"
(selectFile)="onSelectFile($event)"
(select)="onSelect($event)"
(progress)="onUploadProgress($event)"
(success)="onUploadSuccess($event)"
(error)="onUploadError($event)"
></m-upload>这里我们可以看到，这个组件提供了五个事件：
- selectFile： 选好文件后触发的事件。
- select： 开始上传事件。
- progress： 上传进度事件。
- success： 上传成功事件。
- error： 上传错误事件。
我们可以在相应的组件处做相应的业务逻辑。举个例子，我们可以在 progress 事件中，更新 DOM 中的进度条。
onUploadProgress(event) {
var percent = Math.floor(event.progress.percent / 100);
this.percent = percent;
}总结
meepo-uploader 是一款实用的上传工具，提供了基础的 ui，多种类型和数量的文件上传支持，丰富的参数配置以及相应的事件监听，方便了我们在上传文件时快速处理各种问题。希望本篇文章可以帮助读者对 meepo-uploader 有更深的了解和掌握，为前端工程师工作提供一定的学习和指导意义。
示例代码
-- -------------------- ---- -------
---- ------------------- ---
------ - ---------- ------ - ---- ----------------
------------
--------- -------------
--------- -
---------
----------------
-----------------------------------
---------------------------
-------------------------------------
-----------------------------------
-------------------------------
-
-----------
-----------------------
--
---------- ---------------------------
--
------ ----- --------------- ---------- ------ -
-------- -------
------------- - -
---------- -
-
------------------- -
-------------------
-
--------------- -
-------------------
-
----------------------- -
--- ------- - --------------------------------- - -----
------------ - --------
-
---------------------- -
-------------------
-
-------------------- -
-------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea281e8991b448e76bb