zoukankan      html  css  js  c++  java

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

    Angular2中有两个比较好用的上传文件的第三方库，一个是ng2-file-upload，一个是ng2-uploader。ng2-uploader是一个轻便的上传文件的支持库，功能较弱，而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。

    以下以Mac OS操作系统介绍。

    1. 安装

    使用npm安装即可。在项目中打开“终端”，运行命令：

    sudo npm install ng2-file-upload --save

    如果是以systemjs的方式打包，安装完成后需要打开systemjs.config.js文件，在System.config的map字段中的最后一行输入以下字段：

    'ng2-file-upload':            'npm:ng2-file-upload'

    在System.config的packages字段中的最后一行输入：

    'ng2-file-upload': {    
    main: 'index.js',    
    defaultExtension: 'js'
}

    之后便可以在项目中使用了。

    2. 使用

    在需要用到的模块中引用模块：

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

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

    在对应需要使用的组件内引用：

    import { FileUploader } from 'ng2-file-upload';

    初始化FileUploader：

    uploader:FileUploader = new FileUploader({    
    url: "http://www.download.com:80/uploadFile",   
    method: "POST",    
    itemAlias: "uploadedfile"
});

    初始化FileUploader需要传入FileUploaderOptions类型的参数：

    | 参数名 | 参数类型 | 是否是可选值 | 参数说明 |
    |:---- --:|:--------:|:-------------:|:--------:|
    | allowedMimeType | Array<string> | 可选值 | |
    | allowedFileType | Array<string> | 可选值 | 允许上传的文件类型 |
    | autoUpload | boolean | 可选值 | 是否自动上传 |
    | isHTML5 | boolean | 可选值 | 是否是HTML5 |
    | filters | Array<FilterFunction> | 可选值 | |
    | headers | Array<Headers> | 可选值 | 上传文件的请求头参数 |
    | method | string | 可选值 | 上传文件的方式 |
    | authToken | string | 可选值 | auth验证的token |
    | maxFileSize | number | 可选值 | 最大可上传文件的大小 |
    | queueLimit | number | 可选值 | |
    | removeAfterUpload | boolean | 可选值 | 是否在上传完成后从队列中移除 |
    | url | string | 可选值 | 上传地址 |
    | disableMultipart | boolean | 可选值 | |
    | itemAlias | string | 可选值 | 文件标记／别名 |
    | authTokenHeader | string | 可选值 | auth验证token的请求头 |

    2.1 选择文件

    在组件对应的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.2 拖拽文件

    拖拽文件默认支持多文件拖拽。
    对块级元素进行设置（这里以div标签为例）：

    <div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

    在组件.ts文件中设置声明函数：

    fileOverBase(event) {
    // 拖拽状态改变的回调函数
}
fileDropOver(event) {
    // 文件拖拽完成的回调函数
}
    2.3 文件上传

    FileUploader有个数组类型的属性queue，里面是所有拖拽的和选择的文件，只要操作这个属性便可以进行文件上传。

    this.uploader.queue[0].onSuccess = (response, status, headers) => {    
    // 上传文件成功   
    if (status == 200) {
        // 上传文件后获取服务器返回的数据
        let tempRes = JSON.parse(response);        
    }else {            
        // 上传文件后获取服务器返回的数据错误        
    }
};
this.uploader.queue[0].upload(); // 开始上传

    3. FileUploader详解

    FileUploader是ng2-file-upload最主要的部件，里面包含了所有对文件的处理。

    3.1 属性详解
    • isUploading:[boolean] 是否正在上传文件中。
    • queue:[array<FileItem>] 已经拖拽或选择的所有文件。
    • 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<any>;
      获取FileUploader上传队列中的所有未上传的文件。
    • getReadyItems(): Array<any>;
      获取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;
      上传文件完成的回调函数。


    作者：Shmily落墨
    链接：https://www.jianshu.com/p/0741186f60ab
    來源：简书
    简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    三层数据访问层的参数处理
    图片加水印
    网站程序安全策略
    如何在.NET下使用MetaWeBlog API迁移博客
    如何使用NAnt 自动打包DNN模块 之二
    无法转出.cn域名到Godaay.com
    如何避免ASP.NET网页初次加载缓慢
    Teradata Automation Developer 职位
    How to let FIR open a URL when you click an image
    如何使用.NET清除IE的缓存（Temporary Internet Files）
  • 原文地址：https://www.cnblogs.com/airen123/p/9530007.html
Copyright © 2011-2022 走看看