지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Angular4는 ng2-file-upload의 업로드 구성 요소를 통합합니다.

亚连
풀어 주다： 2018-05-30 11:16:27
원래의
2674명이 탐색했습니다.

이 글에서는 주로 ng2-file-upload와 통합된 Angular4의 업로드 구성 요소를 소개하고 참고용으로 제공합니다.

Github에서 Angular4를 지원하는 사용하기 쉬운 파일 업로드 컴포넌트 ng2-file-upload를 찾았습니다. 이 라이브러리의 통합 사용에 대한 간략한 소개는 다음과 같습니다.

이 문서는 이 구성 요소 버전 1.2.1을 기반으로 합니다.

1. 설치

설치는 매우 간단합니다. 프로젝트 루트 경로에서 다음 npm 명령을 실행하세요. 

npm install ng2-file-upload --save
로그인 후 복사

2. 사용 지침

공식 문서는 매우 간단하여 거의 볼 수 없습니다. 자, 여기서는 실제 사용과 디버깅을 바탕으로 기본 구성과 사용 계획을 설명하겠습니다.

2.1. 모듈에 통합

사용해야 하는 모듈에 다음 두 모듈을 도입해야 합니다.

…
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
…
@NgModule({
 …
 imports: [
 …
 CommonModule,
 FileUploadModule
 …
 ],
 …
})
export class ProjectDetailPageModule {}
로그인 후 복사

2.2 FileUploader 초기화

사용되는 해당 구성 요소에 FileUploader를 도입해야 합니다. :

import { FileUploader } from 'ng2-file-upload';
로그인 후 복사

그런 다음 FileUploader 유형의 변수를 선언하고 초기화합니다. 

uploader:FileUploader = new FileUploader({ 
 url: commonConfig.baseUrl + "/uploadFile", 
 method: "POST", 
 itemAlias: "uploadedfile",
 autoUpload: false
});
로그인 후 복사

FileUploader를 초기화하려면 FileUploaderOptions 유형의 매개변수를 전달해야 합니다.

Array선택적 값 파일 업로드를 위한 요청 헤더 매개변수methodstring선택값파일 업로드 방법authTokenstring선택값인증 확인 토큰 maxFileSizenumber선택적 값최대 업로드 가능한 파일 크기queueLimitnumber선택적 값removeAfterUploadboolean 선택적 값Wh 에테르 업로드 중입니다 완료되면 대기열에서 제거 urlstring선택값업로드 주소disableMultipartboolean선택값itemA liasstringcan 선택사항 value파일 태그/별칭 authTokenHeaderstring선택 값인증 확인 토큰 요청 헤더

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"],可选值为：

  1. application

  2. image

  3. video

  4. audio

  5. pdf

  6. compress

  7. doc

  8. xls

  9. 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;

触发时机：上传一个文件成功后回调

参数：

  1. item - 上传成功的文件信息，FileItem类型；

  2. response - 上传成功后服务器的返回信息；

  3. status - 状态码；

  4. 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"]);
 }
}
로그인 후 복사

参数：

  1. fileItem - 要上传的文件信息，FileItem类型；

  2. 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:&#39;.2&#39; }} 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]="{ &#39;width&#39;: item.progress + &#39;%&#39; }"></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(&#39;firstInput&#39;, { read: MdInputDirective })
firstInput: MdInputDirective;
@ViewChild(&#39;fileUpload&#39;)
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
组件
원천：php.cn
이전 기사：nodejs acl의 사용자 권한 관리에 대한 자세한 설명 다음 기사：JS를 사용하여 테이블 열 내용의 즉각적인 검색 및 필터링 수행
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
2026
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2188
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1845
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1737
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1758
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
매개변수 이름매개변수 유형선택적 값인지 여부매개변수 설명
allowedMimeTypeArray선택값
allowedFileTypeArray선택값업로드할 수 있는 파일 형식
autoUploadboolean선택적 값 자동 업로드 여부
isHTML5boolean선택값HTML5인지
filtersArray선택값