Angular2使用ng2-file-upload上传文件

吴驰

2023-12-01

Angular2使用ng2-file-upload上传文件

ng2-file-upload是一个功能比较全面的上传文件的支持库
（参考：http://www.jianshu.com/p/0741186f60ab
https://segmentfault.com/a/1190000007886391
http://valor-software.com/ng2-file-upload/）
Angular2使用ng2-file-upload上传文件：

1、安装ng2-file-upload模块：

npm install ng2-file-upload --save

2、在app.module.ts文件中，在需要的模块中引入一下模块

import { CommonModule }     from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';

然后在@NgModule的imports字段中引用CommonModule和FileUploadModule。

@NgModule({
    imports: [
        CommonModule,
        FileUploadModule
    ]
}

3、对应的app.component.html内容(代码有点乱，而且不知道为什么多选按钮有时弹框会很慢)

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
</div>
<div>
  <form >
  <h1>多选</h1>
  <input type="file" ng2FileSelect [uploader]="uploader" name="fileInput"  id="fileInput" multiple  />
  <!--ng-submit="submit_form()"-->
  <!--<input type="file" name ="filer" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple   />-->
  <h1>单选</h1>
  <input type="file" name ="filer" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
  <table class="table bg-white-only b-a">
  <tbody>
      <div *ngFor="let img of values">
      <td><img [src]="img.filePath" style="max-width: 100px; max-height: 100px" ></td>
      <td>{{img.name}} </td>   <td>{{img.size}} MB</td>
      <td ng-show="true">
      </div>
    </tbody>
  </table>
  <tbody>
    <p>Queue length: {{ uploader?.queue?.length }}</p>
    <tr *ngFor="let item of uploader.queue">
      <td><strong>{{ item?.file?.name }}</strong></td>
      <td class="text-center">
        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
      </td>
      <td>成功与否: {{ item.isSuccess  }}</td>
      <td>失败与否: {{ item.isError   }}</td>
      <td nowrap>
        <button type="button" class="btn btn-success btn-xs"
                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
          <span class="glyphicon glyphicon-upload"></span> Upload
        </button>
        <button type="button" class="btn btn-warning btn-xs"
                (click)="item.cancel()" [disabled]="!item.isUploading">
          <span class="glyphicon glyphicon-ban-circle"></span> Cancel
        </button>
        <button type="button" class="btn btn-danger btn-xs"
                (click)="item.remove(); ">
          <span class="glyphicon glyphicon-trash"></span> Remove
        </button>
      </td>
    </tr>
     <div>
      <div>
        Queue progress:
        <div class="progress" style="">
          <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
        </div>
      </div>
      <button type="button" class="btn btn-success btn-s"
              (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
        <span class="glyphicon glyphicon-upload"></span> Upload all
      </button>
      <button type="button" class="btn btn-warning btn-s"
              (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
      </button>
      <button type="button" class="btn btn-danger btn-s"
              (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
        <span class="glyphicon glyphicon-trash"></span> Remove all
      </button>
    </div>
    </tbody>
</form>
</div>

4、app.component.ts代码:

import { Component,OnInit } from '@angular/core';
import { CommonModule }     from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
// A: 引入FileUpload模块
import { FileUploader } from 'ng2-file-upload';
import {ImageUploadModule} from 'angular2-image-upload';
import {ImageFile} from './ImageFile';

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
  values:ImageFile[] = [];
  file: Array<Object>;
  constructor() {
    this.file = [];
  }
  title = 'LPL';
  // B: 初始化定义uploader变量,用来配置input中的uploader属性
  public uploader:FileUploader = new FileUploader({
  //地址有需要修改，可能存在跨域访问的问题，需要通过代理解决
    url: "/mall-product/test/productFile",
    method: "POST"
  });
 selectedFileOnChanged(event:any) {
    let files = event.target.files;
   for(let i = 0;i < files.length;i++){
   let  imgFile = files[i];
     let file = new ImageFile();
     console.log(imgFile.type.match('image.*')+"");
     // if(imgFile.type.match('image.*')){
     //   continue;
     // }
     file.name = imgFile.name;
     file.size = imgFile.size;
     let fileReader = new FileReader();
     fileReader.readAsDataURL(imgFile);
     fileReader.onload = ( (theFile) =>{
       return (e)=>{
         // console.log(e.target.result);
         let imgPath = e.target.result;
        file.filePath = imgPath;
       };
     })(imgFile);
     this.values.push(file);
   }
  }
}

参考：http://www.jianshu.com/p/0741186f60ab

FileUploader和FileItem

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;
上传文件完成的回调函数。

Angular2使用ng2-file-upload上传文件

Angular2使用ng2-file-upload上传文件

FileUploader和FileItem

相关阅读

相关文章

相关问答

相关文档