您好,登錄后才能下訂單哦!
近期在學(xué)習(xí)使用Angular2做小項目,期間用到很多primeNG的模塊。
本系列將結(jié)合實戰(zhàn)總結(jié)angular2-primeNG各個模塊的使用經(jīng)驗。
文件上傳模塊FileUploadModule
首先要在使用該組件的模塊內(nèi)導(dǎo)入文件上傳模塊
本例中為:
admin.module.ts
import {FileUploadModule} from 'primeng/primeng'; @NgModule({ imports: [FileUploadModule] })
在需要使用上傳功能的組件的HTML頁里添加:
demo-add.component.html:
<label>照片:</label> <div> <!--上傳組件 --> <p-fileUpload name="uploadPhoto[]" 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"> {{file.name}} - {{file.size}} bytes </li> </ul> </template> </p-fileUpload> </div> <!--如果圖片上傳成功,顯示圖片 --> <div *ngIf="demo.photo"> <img src="{{photoUrl}}"> </div>
在組件里寫入事件處理及定義變量:
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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。