1. 简介
ngx-filedropper 是一个 Angular 的文件上传组件，可以通过 npm 包的形式被安装和使用。它依赖于 Angular 的模块，所以可以在 Angular 项目中轻松地集成到你的应用程序中。在本篇文章中，我们将介绍如何使用 ngx-filedropper 进行文件上传。
2. 安装
首先需要安装 ngx-filedropper ，可以使用 npm 包管理器进行安装。
npm install ngx-filedropper
3. 使用
3.1 引入模块
在你的 Angular 应用程序中，需要先引入 ngx-filedropper 的模块。在 app.module.ts 文件中，引入 NgxFileDropperModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - -------------------- - ---- ------------------ ----------- -------- --------------- ---------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
3.2 在模板中使用组件
在你的组件模板中，可以使用 ngx-filedropper 组件用于文件上传。
<ngx-file-dropper [maxFileSize]="10 * 1024 * 1024" [multiple]="true" (onFileDropped)="onFileDropped($event)">
<ng-template #dropZone>
<div class="drop-zone-text">拖动文件到这里来上传</div>
</ng-template>
</ngx-file-dropper>在上面的代码中，我们使用了 ngx-filedropper 组件，并在其上设置了三个属性：
maxFileSize: 最大文件大小，单位为字节multiple: 是否允许上传多个文件onFileDropped: 文件上传完成的回调函数
同时，使用了一个名为 dropZone 的模板，用于展示拖拽区域中需要展示的文本内容。
3.3 实现回调函数
当用户上传文件时，你需要通过实现 onFileDropped 回调函数来处理上传的文件。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
---------- ---------------
--
------ ----- ------------ -
------------------- -------------- -------------- --
-------------------- ---------- ---- -
--------------------------------------
-
-在上面的代码中，我们创建了一个名为 UploadService 的服务用于处理上传的文件，并在组件中进行了注入，同时实现了 onFileDropped 回调函数，以上传文件。
3.4 上传处理
在 UploadService 中，我们需要处理上传的文件，可以使用 XMLHttpRequest 对象来发送 POST 请求，将文件上传到服务器上。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
------ ----- ------------- -
------- --- - -------------------------------------
------------------ ---------- ---- -
----- -------- - --- -----------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----------------------- ----- -----------
-
----- --- - --- -----------------
---------------------- - -- -- -
-- --------------- --- - -- ---------- --- ---- -
---------------------
-
--
---------------- --------- ------
-------------------
-
-在上面的代码中，我们从 FileList 对象中获取文件列表，并将文件添加到 FormData 对象中。然后，使用 XMLHttpRequest 对象发送 POST 请求，并将上传结果打印到控制台中。
4. 总结
在本文中，我们介绍了如何使用 ngx-filedropper 组件进行文件上传。通过使用它，我们可以轻松地实现文件上传功能，并将文件上传到服务器上。希望这篇文章可以帮助你更好的了解 ngx-filedropper 的使用方法，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596381e8991b448d6dd6