如何使用Angular2-primeNG文件上傳模塊FileUpload?

ADVERTISEMENT

如何使用Angular2-primeNG文件上傳模塊FileUpload?

近期在學習使用Angular2做小項目,期間用到很多primeNG的模塊。

本系列將結合實戰總結angular2-primeNG各個模塊的使用經驗。

文件上傳模塊FileUploadModule

首先要在使用該組件的模塊內導入文件上傳模塊

本例中為:

admin.module.ts

import from 'primeng/primeng';

@NgModule({

imports: [FileUploadModule]

})

在需要使用上傳功能的組件的HTML頁里添加:

demo-add.component.html:

<label>照片:</label>

<div>

<!--上傳組件 -->

<p-fileUpload

name="uploadPhoto[]"

ADVERTISEMENT

url="http://localhost:3333/api/upload"

(onUpload)="onPhotoUpload($event)" accept="image/*" maxFileSize="1000000">

<template pTemplate type="content">

<ul *ngIf="photoFiles.length">

<li *ngFor="let file of photoFiles">

- bytes

</li>

</ul>

</template>

</p-fileUpload>

</div>

<!--如果圖片上傳成功,顯示圖片 -->

<div *ngIf="demo.photo">

<img src="">

</div>

在組件里寫入事件處理及定義變量:

demo-add.component.ts:

ADVERTISEMENT

class Demo

demo = new Demo();

photoFiles: any[] = [];

photoUrl:string;

onPhotoUpload(event) {

this.demo.photo = JSON.parse(event.xhr.response).data.name;

this.photoUrl ="upload/demo/"+this.demo.photo;

for(let file of event.files)

onPhotoUpload函數為onUpload(上傳)異步事件觸發的回調函數,接收一個$event參數,這里我們用到的是event.xhr,這是一個XMLHTTPREQUEST對象。我們用JSON.parse去解析,後台NODEJS代碼:

router.post('/upload', function (req, res) {

//文件

const photoData = req.files.uploadPhoto[0];

ADVERTISEMENT

//文件路徑

const filePath = photoData.path;

//讀取文件

fs.readFile(filePath, function (err, data) {

//取時間戳用來命名

const timestamp = Date.now();

//取文件類型用來命名

const type = photoData.type.split('/')[1];

//命名文件

const photo = timestamp + '.' + type;

//存儲路徑

const newPath = path.join(__dirname, '../', 'upload/demo/' + photo);

//寫入文件

fs.writeFile(newPath, data, function (err) {

//返回狀態1表示成功,返回的數據是存儲後的文件名

const reply = {

status: 1,

data: {

name: photo

}

};

res.end(JSON.stringify(reply));

})

});

});

至此FileUpload異步上傳文件,成功後顯示文件的功能就實現了。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持路飯。

本文地址:

ADVERTISEMENT