快捷導(dǎo)航

Angular2-primeNG文件上傳模塊FileUpload使用詳解

更新時(shí)間：2017年01月14日 10:28:40 作者：weixin_36333953

這篇文章主要為大家詳細(xì)介紹了Angular2-primeNG文件上傳模塊FileUpload使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

近期在學(xué)習(xí)使用Angular2做小項(xiàng)目，期間用到很多primeNG的模塊。
本系列將結(jié)合實(shí)戰(zhàn)總結(jié)angular2-primeNG各個(gè)模塊的使用經(jīng)驗(yàn)。

文件上傳模塊FileUploadModule

首先要在使用該組件的模塊內(nèi)導(dǎo)入文件上傳模塊

本例中為：

admin.module.ts

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

在需要使用上傳功能的組件的HTML頁(yè)里添加：

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>

在組件里寫(xiě)入事件處理及定義變量：

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ù)，接收一個(gè)$event參數(shù)，這里我們用到的是event.xhr，這是一個(gè)XMLHTTPREQUEST對(duì)象。我們用JSON.parse去解析，后臺(tái)NODEJS代碼：

router.post('/upload', function (req, res) {
  //文件
  const photoData = req.files.uploadPhoto[0];
  //文件路徑
  const filePath = photoData.path;
  //讀取文件
  fs.readFile(filePath, function (err, data) {
    //取時(shí)間戳用來(lái)命名
    const timestamp = Date.now();
    //取文件類(lèi)型用來(lái)命名
    const type = photoData.type.split('/')[1];
    //命名文件
    const photo = timestamp + '.' + type;
    //存儲(chǔ)路徑
    const newPath = path.join(__dirname, '../', 'upload/demo/' + photo);
    //寫(xiě)入文件
    fs.writeFile(newPath, data, function (err) {
      //返回狀態(tài)1表示成功，返回的數(shù)據(jù)是存儲(chǔ)后的文件名
      const reply = {
        status: 1,
        data: {
          name: photo
        }
      };
      res.end(JSON.stringify(reply));
    })
  });
});

至此FileUpload異步上傳文件,成功后顯示文件的功能就實(shí)現(xiàn)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: