이 글에서는 주로 ng2-file-upload와 통합된 Angular4의 업로드 구성 요소를 소개하고 참고용으로 제공합니다.
Github에서 Angular4를 지원하는 사용하기 쉬운 파일 업로드 컴포넌트 ng2-file-upload를 찾았습니다. 이 라이브러리의 통합 사용에 대한 간략한 소개는 다음과 같습니다.
이 문서는 이 구성 요소 버전 1.2.1을 기반으로 합니다.
설치는 매우 간단합니다. 프로젝트 루트 경로에서 다음 npm 명령을 실행하세요.
공식 문서는 매우 간단하여 거의 볼 수 없습니다. 자, 여기서는 실제 사용과 디버깅을 바탕으로 기본 구성과 사용 계획을 설명하겠습니다.
사용해야 하는 모듈에 다음 두 모듈을 도입해야 합니다.
사용되는 해당 구성 요소에 FileUploader를 도입해야 합니다. :
그런 다음 FileUploader 유형의 변수를 선언하고 초기화합니다.
FileUploader를 초기화하려면 FileUploaderOptions 유형의 매개변수를 전달해야 합니다.
매개변수 이름 |
매개변수 유형 |
선택적 값인지 여부 |
매개변수 설명 |
allowedMimeType |
Array |
선택값 |
|
allowedFileType |
Array |
선택값 |
업로드할 수 있는 파일 형식 |
autoUpload |
boolean |
선택적 값 | 자동 업로드 여부 |
isHTML5 |
boolean |
선택값 |
HTML5인지 |
filters |
Array |
선택값 |
|
| Array | 선택적 값 | 파일 업로드를 위한 요청 헤더 매개변수 |
method | string | 선택값 | 파일 업로드 방법 |
authToken | string | 선택값 | 인증 확인 토큰 |
maxFileSize | number | 선택적 값 | 최대 업로드 가능한 파일 크기 |
queueLimit | number | 선택적 값 |
|
removeAfterUpload | boolean | 선택적 값 | Wh 에테르 업로드 중입니다 완료되면 대기열에서 제거 |
url | string | 선택값 | 업로드 주소 |
disableMultipart | boolean | 선택값 |
|
itemA lias | string | can 선택사항 value | 파일 태그/별칭 |
authTokenHeader | string | 선택 값 | 인증 확인 토큰 요청 헤더 |
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,则通过d9fae9a589f7d7312c0f67fffbcf927a选择完文件后立即自动上传,为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标签:
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
在组件.ts文件中设置声明函数:
selectedFileOnChanged() {
// 这里是文件选择完成后的操作处理
}
选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple属性,即:
<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
2.4.2 支持文件多选的实现示例
下面是参考官方示例改造的一个文件多选时的template及相关后台代码的配置示例:
<ion-card>
<ion-card-header>
文件上传操作
</ion-card-header>
<ion-card-content>
<input #fileUpload hidden=true type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />
<button (click)="fileSelect()" >选择文件</button>
<button (click)="fileAllUp()" >全部上传</button>
<button (click)="fileAllCancel()" >全部取消</button>
<button (click)="fileAllDelete()" >清除列表</button>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header>
上传文件列表
</ion-card-header>
<ion-card-content>
<p>已选文件数量: {{ uploader?.queue?.length }}</p>
<ion-grid>
<ion-row>
<ion-col col-2="">名称</ion-col>
<ion-col col-2="">保存名</ion-col>
<ion-col col-2="">文件大小</ion-col>
<ion-col col-2="">进度</ion-col>
<ion-col col-1="">状态</ion-col>
<ion-col col-3="">操作</ion-col>
</ion-row>
<ion-row *ngFor="let item of uploader.queue">
<ion-col col-2><strong>{{ item?.file?.name }}</strong></ion-col>
<ion-col col-2><input type="text" (change)="changeFileName($event, item)"></ion-col>
<ion-col col-2>
<span>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</span>
</ion-col>
<ion-col col-2>
<p class="progress" style="margin-bottom: 0; height: 70%; width: 90%">
<p class="progress-bar" style="margin-bottom: 0; height: 100%; background-color: red" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></p>
</p>
</ion-col>
<ion-col col-1>
<span *ngIf="item.isSuccess">成功</span>
<span *ngIf="!item.isUploaded">未上传</span>
<span *ngIf="item.isCancel">取消</span>
<span *ngIf="item.isError">错误</span>
</ion-col>
<ion-col col-3>
<button (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
上传
</button>
<button (click)="item.cancel()" [disabled]="!item.isUploading">
取消
</button>
<button (click)="item.remove()">
清除
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
@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标签为例):
<p class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><p>
在组件.ts文件中设置声明函数:
fileOverBase(event) {
// 拖拽状态改变的回调函数
}
fileDropOver(event) {
// 文件拖拽完成的回调函数
}
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
js中apply和Math.max()函数的问题及区别介绍
浅谈Vue内置component组件的应用场景
vue2中使用less简易教程
위 내용은 Angular4는 ng2-file-upload의 업로드 구성 요소를 통합합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!