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) { // 上傳文件后獲取服務器返回的數據 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屬性，即：
6、拖拽上傳文件
支持多文件拖拽上傳
在對應的 .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 可選值 是否是HTML5filters Array 可選值 headers Array<Headers> 可選值 上傳文件的請求頭參數method string 可選值 上傳文件的方式authToken string 可選值 auth驗證的tokenmaxFileSize number 可選值 最大可上傳文件的大小queueLimit number 可選值 removeAfterUpload boolean 可選值 是否在上傳完成后從隊列中移除url string 可選值 上傳地址disableMultipart boolean 可選值 itemAlias string 可選值 文件標記／別名authTokenHeader string 可選值 auth驗證token的請求頭
參考網站： https://valor-software.com/ng2-file-upload/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
