ng-dropzone 是一个方便实用的 Angular 拖拽文件上传组件，可以帮助开发者快速实现文件上传功能。
安装
使用 npm 进行安装：
npm install ng2-dropzone --save
引入模块
在 app.module.ts 中引入 NgDropzoneModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- --------------- ----------- -------- --------------- ------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- --
使用示例
在组件中使用 ng-dropzone 可以通过以下方式：
<ng-dropzone [options]="config" (onFileAdded)="onFileAdded($event)"></ng-dropzone>
在组件中定义 config 和 onFileAdded 方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------------- - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ------- ----------------------- - -
---- -------------------------------
------------ ---
-------------- ---------
--
------ ----------------- ---- -
----------------- ------ -- ------
-
-其中，config 是配置项，可以设置上传文件的 URL、最大文件大小、接受的文件类型等信息；onFileAdded 是上传成功后的回调函数，可以处理上传成功后的响应结果。
配置项
ng-dropzone 支持以下配置项：
- url：文件上传的 URL；
- method：上传方法，默认为 POST；
- maxFileSize：最大文件大小，单位为 MB；
- acceptedFiles：允许上传的文件类型；
- addRemoveLinks：是否添加删除链接；
- autoReset：是否自动清空队列；
- headers：请求头部；
- previewTemplate：预览模板；
- previewsContainer：预览容器；
- clickable：是否可点击。
总结
通过本文我们学习了如何使用 ng-dropzone 实现 Angular 文件上传功能，并介绍了配置项和使用示例。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38554