angular2 ng2-file-upload上傳示例代碼
Angular2中有兩個(gè)比較好用的上傳文件的第三方庫,一個(gè)是ng2-file-upload,一個(gè)是ng2-uploader。ng2-uploader是一個(gè)輕便的上傳文件的支持庫,功能較弱,而ng2-file-upload是一個(gè)功能比較全面的上傳文件的支持庫。這里主要介紹一下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文件中,或者您有多個(gè)模塊,在需要的模塊中引入一下模塊
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ù)錯(cuò)誤
alert("");
}
};
this.uploader.queue[0].upload(); // 開始上傳
}
}
5、對(duì)應(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)支持選擇單個(gè)文件,如需支持文件多選,請(qǐng)?jiān)跇?biāo)簽中添加multiple屬性,即:
6、拖拽上傳文件
支持多文件拖拽上傳
在對(duì)應(yīng)的 .ts文件中定義拖拽函數(shù)
fileOverBase(event) {
// 拖拽狀態(tài)改變的回調(diào)函數(shù)
}
fileDropOver(event) {
// 文件拖拽完成的回調(diào)函數(shù)
}
7、文件上傳
FileUploader有個(gè)數(shù)組類型的屬性queue,里面是所有拖拽的和選擇的文件,只要操作這個(gè)屬性便可以進(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ù)錯(cuò)誤
}
};
this.uploader.queue[0].upload(); // 開始上傳
}
詳細(xì)介紹FileUpload
**初始化配置表**
參數(shù)名 參數(shù)類型 是否是可選值 參數(shù)說明 allowedMimeType Array<string> 可選值 allowedFileType Array<string> 可選值 允許上傳的文件類型 autoUpload boolean 可選值 是否自動(dòng)上傳 isHTML5 boolean 可選值 是否是HTML5 filters Array 可選值 headers Array<Headers> 可選值 上傳文件的請(qǐng)求頭參數(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的請(qǐng)求頭
參考網(wǎng)站: https://valor-software.com/ng2-file-upload/
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法示例
這篇文章主要介紹了Angular2.0實(shí)現(xiàn)modal對(duì)話框的方法,結(jié)合實(shí)例形式分析了angular2.0實(shí)現(xiàn)modal對(duì)話框的樣式、界面及功能等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理,有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08
Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03
AngularJS封裝$http.post()實(shí)例詳解
這篇文章主要介紹了 AngularJS封裝$http.post()實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
angular 服務(wù)的單例模式(依賴注入模式下)詳解
這篇文章主要介紹了angular 服務(wù)的單例模式(依賴注入模式下)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10

