Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用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">
<templatepTemplatetype="content">
<ul*ngIf="photoFiles.length">
<li*ngFor="letfileofphotoFiles">
{{file.name}}-{{file.size}}bytes
</li>
</ul>
</template>
</p-fileUpload>
</div>
<!--如果图片上传成功，显示图片-->
<div*ngIf="demo.photo">
<imgsrc="{{photoUrl}}">
</div>
在组件里写入事件处理及定义变量：
demo-add.component.ts:
classDemo{
photo:String;
}
demo=newDemo();
photoFiles:any[]=[];
photoUrl:string;
onPhotoUpload(event){
this.demo.photo=JSON.parse(event.xhr.response).data.name;
this.photoUrl="upload/demo/"+this.demo.photo;
for(letfileofevent.files){
this.photoFiles.push(file);
}
}
onPhotoUpload函数为onUpload（上传）异步事件触发的回调函数，接收一个$event参数，这里我们用到的是event.xhr，这是一个XMLHTTPREQUEST对象。我们用JSON.parse去解析，后台NODEJS代码：
router.post('/upload',function(req,res){
//文件
constphotoData=req.files.uploadPhoto[0];
//文件路径
constfilePath=photoData.path;
//读取文件
fs.readFile(filePath,function(err,data){
//取时间戳用来命名
consttimestamp=Date.now();
//取文件类型用来命名
consttype=photoData.type.split('/')[1];
//命名文件
constphoto=timestamp+'.'+type;
//存储路径
constnewPath=path.join(__dirname,'../','upload/demo/'+photo);
//写入文件
fs.writeFile(newPath,data,function(err){
//返回状态1表示成功，返回的数据是存储后的文件名
constreply={
status:1,
data:{
name:photo
}
};
res.end(JSON.stringify(reply));
})
});
});
至此FileUpload异步上传文件,成功后显示文件的功能就实现了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。