在前端开发中，文件上传功能是非常常见的需求。如果重复编写上传文件功能，会让代码变得臃肿，而且并不方便管理。而 @glr/ngx-file-uploader npm 包则提供了一个简单易用的上传组件，可以非常方便地集成在 Angular 应用程序中。
安装
首先需要使用 npm 安装 @glr/ngx-file-uploader npm 包：
npm install @glr/ngx-file-uploader --save
引入模块
在应用程序的模块中引入该模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ------------------ - ---- ------------------------- ----------- ------------- --------------- -------- --------------- -------------------- ---------- --- ---------- --------------- -- ------ ----- --------- --
使用
使用文件上传组件非常简单，只需在模板中使用：
<glr-file-uploader [multiple]="false" (filesChanged)="onFilesChanged($event)"></glr-file-uploader>
属性说明：
multiple表示是否允许同时上传多个文件，默认为 false；filesChanged是一个事件，用于监听当文件列表改变时触发。
那么 onFilesChanged 函数就是用于处理文件上传的逻辑，示例函数如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- ------------------- ------------------ --------------------------------------------------------------
--
------ ----- ------------ -
--------------------- ------- -
-- ------------- - -- -
-- ------
-------------------
-
-
-上传配置
如果需要对上传进行更多的配置，那么可以使用 configuration 属性进行配置。
<glr-file-uploader [multiple]="false"
[configuration]="{baseUrl: 'http://localhost:3000', fieldName: 'file'}"
(filesChanged)="onFilesChanged($event)"></glr-file-uploader>属性说明：
baseUrl表示上传文件的基础 URL；fieldName表示上传文件时提交的字段名称。
示例代码
完整的使用示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------- - ---- -------------------------
------------
--------- -----------
--------- ------------------- ------------------
-------------------------------
--------------------------------------------------------------
--
------ ----- ------------ -
-------------- ------------------------- - -
-------- ------------------------
---------- ------
--
--------------------- ------- -
-- ------------- - -- -
-------------------
-
-
-总结
通过上面的介绍，我们可以看出 @glr/ngx-file-uploader npm 包是非常方便的上传组件。它提供了多样化的配置方式，并且只需简单的引用即可使用。如果你的应用程序中需要上传文件，不妨考虑使用这个组件，它将会让你的开发工作更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb48