angular文件上传php,Angular4集成ng2-file-upload的上传组件

本篇文章主要介绍了Angular4集成ng2-file-upload的上传组件，现在分享给大家，也给大家做个参考。

在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类型的参数：参数名参数类型是否是可选值参数说明allowedMimeTypeArray可选值

allowedFileTypeArray可选值允许上传的文件类型

autoUploadboolean可选值是否自动上传

isHTML5boolean可选值是否是HTML5

filtersArray可选值

headersArray可选值上传文件的请求头参数

methodstring可选值上传文件的方式

authTokenstring可选值auth验证的token

maxFileSizenumber可选值最大可上传文件的大小

queueLimitnumber可选值

removeAfterUploadboolean可选值是否在上传完成后从队列中移除

urlstring可选值上传地址

disableMultipartboolean可选值

itemAliasstring可选值文件标记／别名

authTokenHeaderstring可选值auth验证token的请求头

2.2.1. 关键参数说明

headers: 这里参数一个Array类型，数组内接收的类型为{name: 'headerName', value: 'haederValue'}，例如：this.uploader = new FileUploader({

url: commonConfig.baseUrl + "/uploadFile",

method: "POST",

itemAlias: "uploadedfile",

autoUpload: false,

headers:[

{name:"x-AuthenticationToken",value:"dd32fdfd32fs23fds9few"}

]

});

autoUpload: 是否自动上传，如果为true，则通过选择完文件后立即自动上传，为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 - 上传成功后服务器的返回的返回头。

2.3.3. onBuildItemForm

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中文件上传控件处理

2.4.1 input file控件处理

在组件对应的HTML模版中设置input标签：

在组件.ts文件中设置声明函数：selectedFileOnChanged() {

// 这里是文件选择完成后的操作处理

}

选择文件默认支持选择单个文件，如需支持文件多选，请在标签中添加multiple属性，即：

2.4.2 支持文件多选的实现示例

下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例：

文件上传操作

选择文件

全部上传

全部取消

清除列表

上传文件列表

已选文件数量: {{ uploader?.queue?.length }}

名称

保存名

文件大小

进度

状态

操作

{{ item?.file?.name }}

{{ item?.file?.size/1024/1024 | number:'.2' }} MB

成功

未上传

取消

错误

上传

取消

清除

@ViewChild('firstInput', { read: MdInputDirective })

firstInput: MdInputDirective;

@ViewChild('fileUpload')

fileUpload: ElementRef;

…

this.uploader = new FileUploader({

url: commonConfig.baseUrl + "/uploadFile",

method: "POST",

itemAlias: "uploadedfile",

autoUpload: false

});

this.uploader.onSuccessItem = this.successItem.bind(this);

this.uploader.onAfterAddingFile = this.afterAddFile;

this.uploader.onBuildItemForm = 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, form: any): any{

if(!!fileItem["realFileName"]){

form.append("fileName",fileItem["realFileName"]);

}

}

afterAddFile(fileItem: FileItem): any{

}

changeFileName(value: any, fileItem: FileItem){

fileItem["realFileName"] = value.target.value;

}

successItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders):any{

// 上传文件成功

if (status == 200) {

// 上传文件后获取服务器返回的数据

let tempRes = JSON.parse(response);

}else {

// 上传文件后获取服务器返回的数据错误

}

console.info(response+" for "+item.file.name + " status " + status);

}

2.4.3 文件拖拽上传实现

拖拽文件默认支持多文件拖拽。

对块级元素进行设置(这里以p标签为例)：

在组件.ts文件中设置声明函数：fileOverBase(event) {

// 拖拽状态改变的回调函数

}

fileDropOver(event) {

// 文件拖拽完成的回调函数

}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：