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

ADVERTISEMENT

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

近期在學習使用Angular2做小項目,期間用到很多primeNG的模塊。
本系列將結合實戰總結angular2-primeNG各個模塊的使用經驗。

文件上傳模塊FileUploadModule

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

本例中為:

admin.module.ts


 import from 'primeng/primeng';
 @NgModule({
 imports: [FileUploadModule]
 })
 
ADVERTISEMENT

在需要使用上傳功能的組件的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">
 - bytes
 </li>
 </ul>
 </template>
 </p-fileUpload>
 </div>
 <!--如果圖片上傳成功,顯示圖片 -->
 <div *ngIf="demo.photo">
 <img src="">
 </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函數為onUpload(上傳)異步事件觸發的回調函數,接收一個$event參數,這里我們用到的是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) {
 //返回狀態1表示成功,返回的數據是存儲後的文件名
 const reply = {
 status: 1,
 data: {
 name: photo
 }
 };
 res.end(JSON.stringify(reply));
 })
 });
 });
 

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

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

ADVERTISEMENT

本文地址:
ADVERTISEMENT
ADVERTISEMENT