@H_5020@近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。
本系列将结合实战总结angular2-primeNG各个模块的使用经验。
@H502_0@
文件上传模块FileUploadModule
@H_502_0@首先要在使用该组件的模块内导入文件上传模块
@H_5020@本例中为:
@H502_0@admin.module.ts
照片:
@H_502_0@在组件里写入事件处理及定义变量:
@H_502_0@demo-add.component.ts:
@H_502_0@onPhotoUpload函数为onUpload(上传)异步事件触发的回调函数,接收一个$event参数,这里我们用到的是event.xhr,这是一个XMLHTTPREQUEST对象。我们用JSON.parse去解析,后台NODEJS代码:
文件
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));
})
});
});
@H_502_0@至此FileUpload异步上传文件,成功后显示文件的功能就实现了。
@H_502_0@以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。