Angular2使用ng2-file-upload上传文件

Angular2中有两个比较好用的上传文件的第三方库,一个是ng2-file-upload,一个是ng2-uploaderng2-uploader是一个轻便的上传文件的支持库,功能较弱,而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。

以下以Mac OS操作系统介绍。


1. 安装

使用npm安装即可。在项目中打开“终端”,运行命令:

sudo npm install ng2-file-upload --save

如果是以systemjs的方式打包,安装完成后需要打开systemjs.config.js文件,在System.configmap字段中的最后一行输入以下字段:

'ng2-file-upload':            'npm:ng2-file-upload'

System.configpackages字段中的最后一行输入:

'ng2-file-upload': {    
    main: 'index.js',    
    defaultExtension: 'js'
}

之后便可以在项目中使用了。


2. 使用

在需要用到的模块中引用模块:

import { CommonModule }     from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';

然后在@NgModuleimports字段中引用CommonModuleFileUploadModule

在对应需要使用的组件内引用:

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>

在组件.ts文件中设置声明函数:

fileOverBase(event) {
    // 拖拽状态改变的回调函数
}
fileDropOver(event) {
    // 文件拖拽完成的回调函数
}
2.3 文件上传

FileUploader有个数组类型的属性queue,里面是所有拖拽的和选择的文件,只要操作这个属性便可以进行文件上传。

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详解

FileItemFileUploaderqueue属性的元素类型,在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;
    上传文件完成的回调函数。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容