近期在学习使用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异步上传文件,成功后显示文件的功能就实现了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论