快捷導(dǎo)航

angular2 ng2-file-upload上傳示例代碼

更新時間：2018年08月23日 09:33:32 作者：zxc19890923

這篇文章主要介紹了angular2 ng2-file-upload上傳示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Angular2中有兩個比較好用的上傳文件的第三方庫，一個是ng2-file-upload，一個是ng2-uploader。ng2-uploader是一個輕便的上傳文件的支持庫，功能較弱，而ng2-file-upload是一個功能比較全面的上傳文件的支持庫。這里主要介紹一下ng2-file-upload的使用。

ng2-file-upload文件上傳

1、安裝ng2-file-upload模塊

npm install ng2-file-upload --save

2、如果使用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'
}

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

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

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

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

4、在自定義的上傳組件中使用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) {
    // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)
    let tempRes = JSON.parse(response);
   } else {
    // 上傳文件后獲取服務(wù)器返回的數(shù)據(jù)錯誤
    alert("");
   }
  };
  this.uploader.queue[0].upload(); // 開始上傳
 }
}

5、對應(yīng)的html內(nèi)容

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
selectedFileOnChanged($event)在 .ts文件中定義

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

選擇文件默認支持選擇單個文件，如需支持文件多選，請在標(biāo)簽中添加multiple屬性，即：

復(fù)制代碼代碼如下:

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

6、拖拽上傳文件

支持多文件拖拽上傳

復(fù)制代碼代碼如下:

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

在對應(yīng)的 .ts文件中定義拖拽函數(shù)

fileOverBase(event) {
 // 拖拽狀態(tài)改變的回調(diào)函數(shù)
}
fileDropOver(event) {
 // 文件拖拽完成的回調(diào)函數(shù)
}

7、文件上傳

FileUploader有個數(shù)組類型的屬性queue，里面是所有拖拽的和選擇的文件，只要操作這個屬性便可以進行文件上傳。

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

詳細介紹FileUpload

**初始化配置表**

參數(shù)名         參數(shù)類型    是否是可選值    參數(shù)說明
allowedMimeType    Array<string>  可選值  
allowedFileType    Array<string>  可選值  允許上傳的文件類型
autoUpload       boolean     可選值  是否自動上傳
isHTML5        boolean     可選值  是否是HTML5
filters        Array      可選值  
headers        Array<Headers> 可選值  上傳文件的請求頭參數(shù)
method         string     可選值  上傳文件的方式
authToken       string     可選值  auth驗證的token
maxFileSize      number     可選值  最大可上傳文件的大小
queueLimit       number     可選值  
removeAfterUpload   boolean     可選值  是否在上傳完成后從隊列中移除
url          string     可選值  上傳地址
disableMultipart    boolean     可選值  
itemAlias       string     可選值  文件標(biāo)記／別名
authTokenHeader    string     可選值  auth驗證token的請求頭

參考網(wǎng)站： https://valor-software.com/ng2-file-upload/

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: