如何使用Angular2-primeNG文件上传模块FileUpload？

来源：www.45fan.com 2017-03-07 21:42:40

近期在学习使用Angular2做小项目，期间用到很多primeNG的模块。
本系列将结合实战总结angular2-primeNG各个模块的使用经验。

文件上传模块FileUploadModule

首先要在使用该组件的模块内导入文件上传模块

本例中为：

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函数为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异步上传文件,成功后显示文件的功能就实现了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持路饭。

路由器

电脑

手机

网络

如何使用Angular2-primeNG文件上传模块FileUpload？

推荐阅读