angular2 ng2-file-upload上傳

ng2-file-upload文件上傳

一、安裝ng2-file-upload模塊

npm install ng2-file-upload --save

二、若是使用systemjs打包，須要在配置systemjs.config.js文件

A、在System.config的map字段中的最後一行輸入如下字段：

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

B、在System.config的packages字段中的最後一行輸入：

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

三、在app.module.ts文件中，或者您有多個模塊，在須要的模塊中引入一下模塊

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

而後在@NgModule的imports字段中引用CommonModule和FileUploadModule。

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

四、在自定義的上傳組件中使用ng2-file-upload

import {Component, OnInit} from "@angular/core";
// A: 引入FileUpload模塊
import {FileUploader} from "ng2-file-upload";
@Component({
    selector: "my-file",
    templateUrl: "./app/file.html"
})
export class HomeFileComponent implements OnInit {
    // B: 初始化定義uploader變量,用來配置input中的uploader屬性
    public uploader:FileUploader = new FileUploader({
        url: "http://localhost:3000/ng2/uploadFile",
        method: "POST",
        itemAlias: "uploadedfile"
    });
    // C: 定義事件，選擇文件
    selectedFileOnChanged(event:any) {
        // 打印文件選擇名稱
        console.log(event.target.value);
    }
    // D: 定義事件，上傳文件
    uploadFile() {
        // 上傳
        this.uploader.queue[0].onSuccess = function (response, status, headers) {
            // 上傳文件成功
            if (status == 200) {
                // 上傳文件後獲取服務器返回的數據
                let tempRes = JSON.parse(response);
            } else {
                // 上傳文件後獲取服務器返回的數據錯誤
                alert("");
            }
        };
        this.uploader.queue[0].upload(); // 開始上傳
    }
}

五、對應的html內容

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />

selectedFileOnChanged($event)在 .ts文件中定義

selectedFileOnChanged(event: any) {
    console.log(event.target.value);
}

選擇文件默認支持選擇單個文件，如需支持文件多選，請在標籤中添加multiple屬性，即：

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

六、拖拽上傳文件

支持多文件拖拽上傳

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

在對應的 .ts文件中定義拖拽函數

fileOverBase(event) {
    // 拖拽狀態改變的回調函數
}
fileDropOver(event) {
    // 文件拖拽完成的回調函數
}

七、文件上傳

FileUploader有個數組類型的屬性queue，裏面是全部拖拽的和選擇的文件，只要操做這個屬性即可以進行文件上傳。

uploadFileHandel() {
    this.uploader.queue[0].onSuccess = function (response, status, headers) {    
        // 上傳文件成功   
        if (status == 200) {
            // 上傳文件後獲取服務器返回的數據
            let tempRes = JSON.parse(response);        
        }else {            
            // 上傳文件後獲取服務器返回的數據錯誤        
        }
    };
this.uploader.queue[0].upload(); // 開始上傳
}

五、 詳細介紹FileUpload

**初始化配置表**

參數名                 參數類型        是不是可選值       參數說明
allowedMimeType        Array<string>   可選值    
allowedFileType        Array<string>   可選值    容許上傳的文件類型
autoUpload             boolean         可選值    是否自動上傳
isHTML5                boolean         可選值    是不是HTML5
filters                Array           可選值    
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的請求頭

參考網站： http://valor-software.com/ng2...