前言
当今 Web 开发中，文件上传已成为常见需求之一。传统的文件上传方式一般都是采用 HTML 的 form 标签的 enctype=multipart/form-data 类型，这种方式简单、易实现，但用户体验却不尽如人意，通常需要等待上传过程完成后再得到响应结果。
目前，在前端文件上传方面，有很多优秀的解决方案，其中一种就是采用 ngx-uploader-th 这个 NPM 包。它为我们提供了一种简便、可依赖的文件上传方式。
下面，我们就来一起学习如何使用 ngx-uploader-th 这个 NPM 包。
环境
在学习 ngx-uploader-th 之前，需要先准备好以下环境：
- Angular CLI
- Node.js(v10.16.3 及以上版本)
- npm/npmCi
安装
ngx-uploader-th 可以通过 npm 包管理器很容易地安装：
npm install ngx-uploader-th --save
引入
在使用 ngx-uploader-th 之前，我们需要在 app.module.ts 文件中引入 ngx-uploader-th 的 FileUploadModule。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------
---
-----------
---
-------- -
---
-----------------
---
--
---
--
------ ----- --------- - -上传图片
接下来，我们来演示一下如何使用 ngx-uploader-th 进行图片上传。首先，在组件 HTML 中添加文件上传组件：
<div class="upload-area"> <p>请上传您的图片</p> <input type="file" id="fileupload" ng2FileSelect [uploader]="uploader"/> <button type="button" class="btn btn-primary" (click)="uploader.uploadAll()">上传</button> <button type="button" class="btn btn-default" (click)="uploader.cancelAll()">取消</button> </div>
接下来，在组件 ts 中进行实现：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------ --------- ------------ - --- -------------- ---- ------------------------------ ---
---------- -
-
------ ----------- -
--------------------------
-
------ ----------- -
--------------------------
-
-其中，我们定义了一个名为 uploader 的 FileUploader 对象，它提供了多种方法和属性，可以用于进行文件上传操作。
通过 uploader.uploadAll() 方法，我们可以上传指定的文件，而通过 uploader.cancelAll() 方法，我们可以取消当前正在上传的文件。
上传文件类型限制
在实际开发过程中，往往需要对上传文件的类型进行限制，以确保上传的文件符合需求，并且不会给系统带来不必要的压力。
通过 ngx-uploader-th，可以轻松实现这一目标。下面，我们来演示一下如何进行文件类型限制。
首先，需要在组件 HTML 中改进代码：
<div class="upload-area"> <p>请上传您的图片</p> <input type="file" id="fileupload" ng2FileSelect [uploader]="uploader" accept=".jpg,.png,.gif,.bmp" /> <button type="button" class="btn btn-primary" (click)="uploader.uploadAll()">上传</button> <button type="button" class="btn btn-default" (click)="uploader.cancelAll()">取消</button> </div>
这里，我们通过 accept 属性对文件类型进行了限定，只允许上传 jpg，png，gif，bmp 类型的文件。
接下来，我们需要在组件文件中添加一些代码进行实现：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------ --------- ------------ - --- --------------
---- -------------------------------
---------------- -------------- ------------ ------------ -------------
------------ -----------
---
---------- -
-
------ ----------- -
--------------------------
-
------ ----------- -
--------------------------
-
-其中，我们通过 allowedMimeType 属性和 maxFileSize 属性对文件类型和文件大小进行了限制。
上传进度条
最后，在进行文件上传时，我们往往需要对上传进度进行监控，并对当前上传进度进行展示，以优化用户体验。通过 ngx-uploader-th，我们可以很容易地实现这一目标。
在组件 HTML 中改进代码：
-- -------------------- ---- -------
---- -------------------------
---- --------------------
--------------
------ ----------- --------------- ------------- -----------------------
------- ------------- ---------- ------------ ------------------------------------------
------- ------------- ---------- ------------ ------------------------------------------
---
------
------这里，我们添加了一个新的 div 容器，并对样式进行了改进。
接着，在组件 ts 中添加代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------ --------- ------------ - --- -------------- ---- ------------------------------ ---
---------- -
---------------------------- - ---------- --------- --------- ---- -- -
--------------------- ---------- ----------
-
-
------ ----------- -
--------------------------
-
------ ----------- -
--------------------------
-
-这里，我们在 ngOnInit() 方法中添加了 onProgressItem 事件方法，用于监控上传进度，并在控制台打印出当前上传进度。
最后，在组件 css 中添加代码：
-- -------------------- ---- ------- ------------ - ------ ------ ------- ------ ------- ------ --- ----- -------------- ----- ----------- ------- - ---------------------- - ------------- -------- - ----------------- - --------- --------- -------- ---- ------- - ----- ---------- ------- - ------------- - ------- ----- -------------- ---- -
这里，我们对进度条的样式进行了一些调整。
至此，ngx-uploader-th 的使用已经结束。通过学习，我们熟悉了文件上传的流程，并学习了如何通过 ngx-uploader-th 快速实现文件上传、上传进度监听以及上传文件类型限制等操作。
完整代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------- -------- - ---- ------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------ --------- ------------ - --- --------------
---- -------------------------------
---------------- -------------- ------------ ------------ -------------
------------ -----------
---
---------- -
---------------------------- - ---------- --------- --------- ---- -- -
--------------------- ---------- ----------
-
-
------ ----------- -
--------------------------
-
------ ----------- -
--------------------------
-
--- -------------------- ---- -------
---- -------------------------
---- --------------------
--------------
------ ----------- --------------- ------------- -----------------------
------- ------------- ---------- ------------ ------------------------------------------
------- ------------- ---------- ------------ ------------------------------------------
---- ----------- ---- -- ----------------
---- -----------------
---- -------------------- ---------------------------- - -----------
------
------
------
------
-------
------------ -
------ ------
------- ------
------- ------ --- -----
-------------- -----
----------- -------
-
---------------------- -
------------- --------
-
----------------- -
--------- ---------
-------- ----
------- - -----
---------- -------
-
------------- -
------- -----
-------------- ----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056dc881e8991b448e718c