angular2的文件上传

最新推荐文章于 2021-09-14 17:27:41 发布

转载最新推荐文章于 2021-09-14 17:27:41 发布 · 1.3k 阅读

文章标签：

#angular2

angular2 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何使用ng2-file-upload库实现Angular2项目中的文件上传功能，包括安装配置、使用方法及核心组件FileUploader和FileItem的深入解析。

转载自：http://www.jianshu.com/p/0741186f60ab

可以参考：http://blog.youkuaiyun.com/baidu_28660921/article/details/74779584

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

以下以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>

在组件.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详解

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;
上传文件完成的回调函数。