ng2-file-upload入门

ng2-file-upload官网：https://valor-software.com/ng2-file-upload/

GitHub网址：https://github.com/valor-software/ng2-file-upload

1、安装

ng2-file-upload的推荐安装方法是使用以下命令通过npm包管理器：

 

npm install ng2-file-upload --save

 

2、导入FileUploadModule

使用ng2-file-upload导入到声明组件的模块中：

import { FileUploadModule } from 'ng2-file-upload';

3、将它添加到[imports]下@NgModule：

imports: [ ... FileUploadModule, ... ]

4、导入FileUploader组件：

import { FileUploader } from 'ng2-file-upload';

5、为API网址创建变量：

const URL = 'path_to_api';

6、初始化它：

public uploader:FileUploader = new FileUploader({url: URL});

API for ng2FileSelect

属性

• uploader- （FileUploader） - 上传者对象。请参阅演示中使用

活动

• onFileSelected - 选择文件并将其添加到上传器队列时触发

API for ng2FileDrop

属性

• uploader- （FileUploader） - 上传者对象。请参阅演示中使用

此对象支持的参数：

1. url - 文件上传者路由的URL
2. authToken - 在文件发送期间将作为“授权”标头应用的身份验证令牌。
3. disableMultipart - 如果为“true”，则禁用使用多部分表单进行文件上载，而不是流式传输文件。某些API（例如Amazon S3）可能希望流式传输文件而不是通过表单发送。默认为false。
4. itemAlias - 项别名（表单名称重新授权）
5. formatDataFunction - 修改请求正文的功能。'DisableMultipart'必须为'true'才能调用此函数。
6. formatDataFunctionIsAsync - 通知'formatDataFunction'中发送的函数是否是异步的。默认为false。
7. parametersBeforeFiles - 状态是否应在文件之前或之后追加其他参数。默认为false。

活动

• fileOver - 它在Drop Area的'over'和'out'事件期间开火; 返回boolean：true如果文件超出Drop Area，则为falseout。请参阅使用ts demo和 html演示
• onFileDrop - 文件丢弃在丢弃区域后触发; 您可以传入$event以获取已删除的文件列表。即(onFileDrop)="dropped($event)"