Angular2中有两个比较好用的上传文件的第三方库，一个是ng2-file-upload，一个是ng2-uploader。ng2-uploader是一个轻便的上传文件的支持库，功能较弱，而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。
以下以Mac OS操作系统介绍。
作者：Shmily落墨
链接：https://www.jianshu.com/p/0741186f60ab
https://segmentfault.com/a/1190000007886391
http://www.php.cn/js-tutorial-399182.html
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
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 =newFileUploader({ url:"http://www.download.com:80/uploadFile", method:"POST", itemAlias:"uploadedfile"});
初始化FileUploader需要传入FileUploaderOptions类型的参数：
| 参数名 | 参数类型 | 是否是可选值 | 参数说明 |
|:---- --:|:--------:|:-------------:|:--------:|
| allowedMimeType | Array | 可选值 | |
| allowedFileType | Array | 可选值 | 允许上传的文件类型 |
| autoUpload | boolean | 可选值 | 是否自动上传 |
| isHTML5 | boolean | 可选值 | 是否是HTML5 |
| filters | Array | 可选值 | |
| headers | Array | 可选值 | 上传文件的请求头参数 |
| 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标签：
在组件.ts文件中设置声明函数：
selectedFileOnChanged() {// 这里是文件选择完成后的操作处理}
选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：
2.2 拖拽文件
拖拽文件默认支持多文件拖拽。
对块级元素进行设置（这里以div标签为例）：
在组件.ts文件中设置声明函数：
fileOverBase(event) {// 拖拽状态改变的回调函数}fileDropOver(event) {// 文件拖拽完成的回调函数}
2.3 文件上传
FileUploader有个数组类型的属性queue，里面是所有拖拽的和选择的文件，只要操作这个属性便可以进行文件上传。
this.uploader.queue[0].onSuccess =(response, status, headers) =>{// 上传文件成功 if(status ==200) {// 上传文件后获取服务器返回的数据lettempRes =JSON.parse(response); }else{// 上传文件后获取服务器返回的数据错误 }};this.uploader.queue[0].upload();// 开始上传
3. FileUploader详解
FileUploader是ng2-file-upload最主要的部件，里面包含了所有对文件的处理。
3.1 属性详解
isUploading:[boolean]是否正在上传文件中。
queue:[array]已经拖拽或选择的所有文件。
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;
获取FileUploader上传队列中的所有未上传的文件。
getReadyItems(): Array;
获取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;
上传文件完成的回调函数。
作者：Shmily落墨
链接：https://www.jianshu.com/p/0741186f60ab
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论