转载自:http://www.cnblogs.com/gavin-cn/p/7256852.html
在Github上找到了一个支持Angular4好用的文件上传组件
ng2-file-upload ,这里简单介绍一下这个库的集成使用方案。
本文基于该组件的1.2.1 版。
1. 安装
安装非常简单,只要在项目根路径下运行如下npm命令即可:
npm install ng2-file-upload --save
2. 使用说明
官方的文档写的非常简单,几乎看不出什么来,这里结合实际的使用调试,说明一下基本的配置和使用方案。
2.1. 集成到Module中
在需要使用的Module中需要引入如下两个模块:
…
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
…
@NgModule({
…
imports: [
…
CommonModule,FileUploadModule
…
],…
})
export class ProjectDetailPageModule {}
2.2. 初始化FileUploader
在对应的使用的Component中,需要引入FileUploader :
import { FileUploader } from 'ng2-file-upload';
然后声明一个FileUploader 类型的变量,并将其初始化:
uploader:FileUploader = new FileUploader({
url: commonConfig.baseUrl + "/uploadFile",method: "POST",itemAlias: "uploadedfile",autoUpload: false
});
初始化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.2.1. 关键参数说明
- headers:这里参数一个Array类型,数组内接收的类型为{name: 'headerName',value: 'haederValue'},例如:
this.uploader = new FileUploader({
url: commonConfig.baseUrl + "/uploadFile",255)">false,headers:[
{name:"x-AuthenticationToken",value:"dd32fdfd32fs23fds9few"}
]
});
- autoUpload:是否自动上传,如果为true,则通过<input type="file"/>选择完文件后立即自动上传,为false则需要手工调用
uploader.uploadAll() 或者uploader.uploadItem(value: FileItem) 方法进行手工上传。
-
allowedFileType:这个文件类型并非我们认为的文件后缀,不管选择哪一个值,并不会过滤弹出文件选择时显示的文件类型,只是选择后,非该类型的文件会被过滤掉,例如allowedFileType:["image","xls"] ,可选值为:
- application
- image
- video
- audio
- pdf
- compress
- doc
- xls
- ppt
-
allowedMimeType:这个是通过Mime类型进行过滤,例如allowedMimeType: ['image/jpeg','image/png' ] ,跟上面的allowedFileType 参数一样,不管选择哪一个值,并不会过滤弹出文件选择时显示的文件类型,只是选择后,非该类型的文件会被过滤掉。
2.3. FileUploader常用事件绑定
注意基于uploader 事件绑定的函数其默认scope为uploader 自身,所以如果想在对应的绑定函数中使用其他scope对象,需要使用bind 函数处理对应的绑定函数,如下:
this.uploader.onSuccessItem = this.successItem.bind(this);
下面介绍三个常用的事件
2.3.1. onAfterAddingFile
onAfterAddingFile(fileItem: FileItem): any;
- 触发时机:添加一个文件之后的回调
- 参数:
- fileItem - 添加的文件信息,FileItem类型。
2.3.2. onSuccessItem
onSuccessItem(item: FileItem,response: string,status: number,headers: ParsedResponseHeaders): any;
- 触发时机:上传一个文件成功后回调
- 参数:
- item - 上传成功的文件信息,FileItem类型;
- response - 上传成功后服务器的返回信息;
- status - 状态码;
- headers - 上传成功后服务器的返回的返回头。
onBuildItemForm(fileItem: FileItem,form: any): any;
- 触发时机:创建文件之后的回调,大约是在进行实际的上传前,这个事件经常用来对form进行处理,用以传递一些文件以外的业务相关信息。
例如:
this.uploader.onBuildItemForm = this.buildItemForm;
…
buildItemForm(fileItem: FileItem,form: any): any{
if(!!fileItem["realFileName" ]){
form.append("fileName",fileItem["realFileName" ]);
}
}
- 参数:
- fileItem - 要上传的文件信息,FileItem类型;
- form - 表单信息,用来添加文件相关的业务信息,方便后台处理,FormData类型。
2.4. Template中文件上传控件处理
在组件对应的HTML模版中设置input 标签:
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在组件.ts文件中设置声明函数:
selectedFileOnChanged() {
// 这里是文件选择完成后的操作处理
}
选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple属性,即:
="selectedFileOnChanged($event)" multiple />
2.4.2 支持文件多选的实现示例
下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例:
ion-card >
ion-card-header>
文件上传操作
</ion-card-content>
#fileUpload hidden=true />
button (click)="fileSelect()" >选择文件 button="fileAllUp()" >全部上传 ="fileAllCancel()" >全部取消 ="fileAllDelete()" >清除列表 >
>
上传文件列表
p>已选文件数量: {{ uploader?.queue?.length }} ion-grid>
ion-row>
ion-col col-2="">名称 ion-col>保存名 >文件大小 >进度 col-1>状态 col-3>操作 >
ion-row *ngFor="let item of uploader.queue"><strong>{{ item?.file?.name }} ></="text"="changeFileName($event,item)">
span>{{ item?.file?.size/1024/1024 | number:'.2' }} MB >
div class="progress" style="margin-bottom: 0; height: 70%; width: 90%">
="progress-bar" style="margin-bottom: 0; height: 100%; background-color: red" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"divspan *ngIf="item.isSuccess">成功 ="!item.isUploaded">未上传 ="item.isCancel">取消 ="item.isError">错误 ="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
上传
="item.cancel()"="!item.isUploading">
取消
="item.remove()">
清除
>
@ViewChild('firstInput',{ read: MdInputDirective })
firstInput: MdInputDirective;
@ViewChild('fileUpload')
fileUpload: ElementRef;
…
false
});
this);
this.uploader.onAfterAddingFile = this.afterAddFile;
this.buildItemForm;
…
fileSelect(): any{
this.fileUpload.nativeElement.click();
}
fileAllUp(): any{
this.uploader.uploadAll();
}
fileAllCancel(): any{
this.uploader.cancelAll();
}
fileAllDelete(): any{
this.uploader.clearQueue();
}
selectedFileOnChanged(event) {
这里是文件选择完成后的操作处理
}
buildItemForm(fileItem: FileItem,fileItem["realFileName"]);
}
}
afterAddFile(fileItem: FileItem): any{
}
changeFileName(value: any,fileItem: FileItem){
fileItem["realFileName"] = value.target.value;
}
successItem(item: FileItem,headers: ParsedResponseHeaders):any{
上传文件成功
if (status == 200) {
上传文件后获取服务器返回的数据
let tempRes = JSON.parse(response);
}else {
上传文件后获取服务器返回的数据错误
}
console.info(response+" for "+item.file.name + " status " + status);
}
2.4.3 文件拖拽上传实现
拖拽文件默认支持多文件拖拽。 对块级元素进行设置(这里以div标签为例):
="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader">
在组件.ts 文件中设置声明函数:
fileOverBase(event) {
拖拽状态改变的回调函数
}
fileDropOver(event) {
文件拖拽完成的回调函数
}
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|