近期在學(xué)習(xí)使用Angular2做小項目，期間用到很多primeNG的模塊。
本系列將結(jié)合實戰(zhàn)總結(jié)angular2-primeNG各個模塊的使用經(jīng)驗。
成都創(chuàng)新互聯(lián)公司自2013年起，先為宿遷等服務(wù)建站，宿遷等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為宿遷企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
文件上傳模塊FileUploadModule
首先要在使用該組件的模塊內(nèi)導(dǎo)入文件上傳模塊
本例中為：
admin.module.ts
重慶分公司
重慶分公司
import {FileUploadModule} from 'primeng/primeng';
@NgModule({
imports: [FileUploadModule]
})
在需要使用上傳功能的組件的HTML頁里添加：
demo-add.component.html:
- {{file.name}} - {{file.size}} bytes
在組件里寫入事件處理及定義變量：
demo-add.component.ts:
class Demo{
photo:String;
}
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) {
this.photoFiles.push(file);
}
}
onPhotoUpload函數(shù)為onUpload（上傳）異步事件觸發(fā)的回調(diào)函數(shù)，接收一個$event參數(shù)，這里我們用到的是event.xhr，這是一個XMLHTTPREQUEST對象。我們用JSON.parse去解析，后臺NODEJS代碼：
router.post('/upload', function (req, res) {
//文件
const photoData = req.files.uploadPhoto[0];
//文件路徑
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) {
//返回狀態(tài)1表示成功，返回的數(shù)據(jù)是存儲后的文件名
const reply = {
status: 1,
data: {
name: photo
}
};
res.end(JSON.stringify(reply));
})
});
});
至此FileUpload異步上傳文件,成功后顯示文件的功能就實現(xiàn)了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
