如何在angular中使用 ng2-file-upload實(shí)現(xiàn)上傳

本篇文章給大家分享的是有關(guān)如何在angular中使用 ng2-file-upload實(shí)現(xiàn)上傳，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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);
}

選擇文件默認(rèn)支持選擇單個文件，如需支持文件多選，請?jiān)跇?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，里面是所有拖拽的和選擇的文件，只要操作這個屬性便可以進(jìn)行文件上傳。

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(); // 開始上傳
}

詳細(xì)介紹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驗(yàn)證的token
maxFileSize      number     可選值  最大可上傳文件的大小
queueLimit       number     可選值  
removeAfterUpload   boolean     可選值  是否在上傳完成后從隊(duì)列中移除
url          string     可選值  上傳地址
disableMultipart    boolean     可選值  
itemAlias       string     可選值  文件標(biāo)記／別名
authTokenHeader    string     可選值  auth驗(yàn)證token的請求頭

以上就是如何在angular中使用 ng2-file-upload實(shí)現(xiàn)上傳，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。