Angular2使用ng2-file-upload上传文件
来源:互联网 发布:网络教育专科多少钱 编辑:程序博客网 时间:2024/04/28 02:44
以下以Mac OS操作系统介绍。
1. 安装
使用npm安装即可。在项目中打开“终端”,运行命令:
sudo npm install ng2-file-upload --save
如果是以systemjs
的方式打包,安装完成后需要打开systemjs.config.js
文件,在System.config
的map
字段中的最后一行输入以下字段:
'ng2-file-upload': 'npm:ng2-file-upload'
在System.config
的packages
字段中的最后一行输入:
'ng2-file-upload': { main: 'index.js', defaultExtension: 'js'}
之后便可以在项目中使用了。
2. 使用
在需要用到的模块中引用模块:
import { CommonModule } from '@angular/common';import { FileUploadModule } from 'ng2-file-upload';
然后在@NgModule
的imports
字段中引用CommonModule
和FileUploadModule
。
在对应需要使用的组件内引用:
import { FileUploader } from 'ng2-file-upload';
初始化FileUploader
:
uploader:FileUploader = new FileUploader({ url: "http://www.download.com:80/uploadFile", //上传地址 method: "POST", itemAlias: "uploadedfile"});
初始化FileUploader
需要传入FileUploaderOptions
类型的参数:
| 参数名 | 参数类型 | 是否是可选值 | 参数说明 |
|:---- --:|:--------:|:-------------:|:--------:|
| allowedMimeType | Array<string> | 可选值 | |
| allowedFileType | Array<string> | 可选值 | 允许上传的文件类型 |
| autoUpload | boolean | 可选值 | 是否自动上传 |
| isHTML5 | boolean | 可选值 | 是否是HTML5 |
| filters | Array<FilterFunction> | 可选值 | |
| headers | Array<Headers> | 可选值 | 上传文件的请求头参数 |
| method | string | 可选值 | 上传文件的方式 |
| authToken | string | 可选值 | auth验证的token |
| maxFileSize | number | 可选值 | 最大可上传文件的大小 |
| queueLimit | number | 可选值 | |
| removeAfterUpload | boolean | 可选值 | 是否在上传完成后从队列中移除 |
| url | string | 可选值 | 上传地址 |
| disableMultipart | boolean | 可选值 | |
| itemAlias | string | 可选值 | 文件标记/别名 |
| authTokenHeader | string | 可选值 | auth验证token的请求头 |
2.1 选择文件
在组件对应的HTML模版中设置input
标签:
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在组件.ts
文件中设置声明函数:
selectedFileOnChanged() { // 这里是文件选择完成后的操作处理}
选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple
属性,即:
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
2.2 拖拽文件
拖拽文件默认支持多文件拖拽。
对块级元素进行设置(这里以div
标签为例):
<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>
<div (click)='uploadFile()'>文件上传</div>
在组件.ts
文件中设置声明函数:
fileOverBase(event) { // 拖拽状态改变的回调函数}fileDropOver(event) { // 文件拖拽完成的回调函数}
2.3 文件上传
FileUploader
有个数组类型的属性queue
,里面是所有拖拽的和选择的文件,只要操作这个属性便可以进行文件上传。
uploadFile()={this.uploader.queue[0].onSuccess = (response, status, headers) => { // 上传文件成功 if (status == 200) { // 上传文件后获取服务器返回的数据 let tempRes = JSON.parse(response); }else { // 上传文件后获取服务器返回的数据错误 }};this.uploader.queue[0].upload(); // 开始上传
}
3. FileUploader详解
FileUploader
是ng2-file-upload最主要的部件,里面包含了所有对文件的处理。
3.1 属性详解
- isUploading:[boolean] 是否正在上传文件中。
- queue:[array<FileItem>] 已经拖拽或选择的所有文件。
- progress:[number] 所有的上传文件的整体进度。
- options:[FileUploaderOptions] 上传文件的配置信息,前面已经介绍过。
3.2 方法详解
- setOptions(options: FileUploaderOptions): void;
设置上传文件的配置信息。 - addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void;
手动添加文件到FileUploader
的上传队列中。 - removeFromQueue(value: FileItem): void;
从FileUploader
的上传队列中移除指定文件。 - clearQueue(): void;
清除FileUploader
上传队列中的所有文件。 - uploadItem(value: FileItem): void;
上传指定文件。 - cancelItem(value: FileItem): void;
取消指定文件的上传。 - uploadAll(): void;
上传FileUploader
的上传队列中的所有文件。 - cancelAll(): void;
取消FileUploader
的上传队列中的所有文件的上传。 - isFile(value: any): boolean;
判断是否是文件。 - getIndexOfItem(value: any): number;
获取文件在FileUploader
上传队列中的位置。 - getNotUploadedItems(): Array<any>;
获取FileUploader
上传队列中的所有未上传的文件。 - getReadyItems(): Array<any>;
获取FileUploader
上传队列中的所有准备上传的文件。 - destroy(): void;
销毁FileUploader
实例。
3.3 监听详解
- onAfterAddingAll(fileItems: any): any;
添加完所有文件之后的回调
返回: - fileItems - 添加的文件的数组
- onBuildItemForm(fileItem: FileItem, form: any): any;
创建文件之后的回调
返回: - fileItem - 创建的文件
- form - 添加的方式
- onAfterAddingFile(fileItem: FileItem): any;
添加一个文件之后的回调
返回: - fileItem - 添加的文件
- onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any;
添加文件失败的回调
返回: - item -
- filter -
- options -
- onBeforeUploadItem(fileItem: FileItem): any;
要上传文件之前的回调
返回: - fileItem - 将要上传的文件
- onProgressItem(fileItem: FileItem, progress: any): any;
上传文件的进度(开始上传后调用非常频繁)
返回: - fileItem - 正在上传的文件
- progress - 该文件的上传进度
- onProgressAll(progress: any): any;
整体的上传进度的回调(开始上传后调用非常频繁)
返回: - progress - 整体的上传文件的进度
- onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
上传一个文件成功的回调
返回: - item - 上传成功的文件
- response - 上传成功后服务器的返回
- status - 状态码
- headers - 上传成功后服务器的返回的返回头
- onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
上传一个文件错误的回调
返回: - item - 上传错误的文件
- response - 返回的错误
- status - 状态码
- headers - 返回的错误返回头
- onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
取消上传一个文件的回调
返回: - item - 取消上传的文件
- response - 取消的返回信息
- status - 状态码
- headers - 取消的返回信息的返回头
- onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;
完成上传一个文件的回调
返回: - item - 上传成功的文件
- response - 上传成功后服务器的返回
- status - 状态码
- headers - 上传成功后服务器的返回的返回头
- onCompleteAll(): any;
完成上传所有文件的回调
4. FileItem详解
FileItem
是FileUploader
中queue
属性的元素类型,在FileUploader
中存储的文件的基本类型。
4.1 属性详解
- alias [string] : 上传的标志/别名。
- url [string] : 地址。
- method [string] : 上传的方法。
- headers [any] : 上传的头部参数。
- withCredentials: [boolean] : 是否使用证书。
- formData [any] : 格式化数据?
- isReady [boolean] : 是否准备上传(是否可以上传)。
- isUploading [boolean] : 是否正在上传。
- isUploaded [boolean] : 是否已经上传过。
- isSuccess [boolean] : 是否上传成功。
- isCancel [boolean] : 是否取消上传。
- isError [boolean] : 是否上传错误。
- progress [number] : 上传进度。
- index [number] : 在队列中的位置。
4.2 方法详解
- upload(): void;
开始上传这个文件。 - cancel(): void;
取消上传这个文件。 - remove(): void;
将这个文件从上传队列中移除。
4.3 监听详解
- onBeforeUpload(): void;
开始上传之前的回调函数。 - onBuildForm(form: any): any;
创建文件的回调函数。
返回: - form - 文件来源。
- onProgress(progress: number): any;
上传文件的进度回调函数。
返回: - progress - 上传文件的进度。
- onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any;
上传文件成功的回调函数。
返回: - response - 成功后的回调数据
- status - 状态码
- headers - 回调数据的返回头
- onError(response: string, status: number, headers: ParsedResponseHeaders): any;
上传文件错误的回调函数。 - onCancel(response: string, status: number, headers: ParsedResponseHeaders): any;
取消上传的回调函数。 - onComplete(response: string, status: number, headers: ParsedResponseHeaders): any;
上传文件完成的回调函数。
- Angular2使用ng2-file-upload上传文件
- Angular2使用ng2-file-upload上传文件
- Angular4上传文件中ng2-file-upload控件
- Angular2 ng2-file-upload使用FileReader在网页中显示用户选择图片
- 支持Angular4好用的文件上传组件ng2-file-upload
- ng2 angular2 使用bootstrap框架
- RAP upload file 上传文件
- angular file upload 文件上传
- Angular-file-upload文件上传插件的使用
- angularjs 文件上传ng-file-upload插件使用
- JQuery Upload File 上传文件提示 Empty file upload result
- Spring MVC 文件上传 file upload
- SpringMVC File Upload 多文件上传
- jquery-file-upload 文件上传,带进度条
- [Angularjs]ng-file-upload上传文件
- angular-file-upload angularJS 文件上传
- AngularJS 文件上传控件 ng-file-upload
- AngularJS 文件上传控件 ng-file-upload
- linux操作DB2小知识
- 正则表达式获取中括号里面的内容
- js常遇问题总结
- 欢迎使用CSDN-markdown编辑器
- 图片、文本、音视频和应用文件托管必备利器-神箭手文件云托管服务
- Angular2使用ng2-file-upload上传文件
- git&github
- Flask源码解读(1) -- app.run()的背后
- 关于技术博客
- Oracle数据库中同义词、试图和序列
- 关于JAVA调用C++的几种方式和一些问题 UnsatisfiedLinkError
- 压缩感知基本概括——三大基本问题
- kafka入门
- Mybatis最入门---多媒体文件存储