如何在angular中使用 ng2-file-upload實現上傳

本篇文章給大家分享的是有關如何在angular中使用 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) {
    // 上傳文件后獲取服務器返回的數據
    let tempRes = JSON.parse(response);
   } else {
    // 上傳文件后獲取服務器返回的數據錯誤
    alert("");
   }
  };
  this.uploader.queue[0].upload(); // 開始上傳
 }
}

5、對應的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 />

6、拖拽上傳文件

支持多文件拖拽上傳

復制代碼 代碼如下:

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

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

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

7、文件上傳

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的請求頭

以上就是如何在angular中使用 ng2-file-upload實現上傳，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。