Angular2-primeNG文件上传模块FileUpload使用详解

前端之家收集整理的这篇文章主要介绍了Angular2-primeNG文件上传模块FileUpload使用详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

文件上传模块FileUploadModule

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

本例中为:

admin.module.ts

在需要使用上传功能的组件的HTML页里添加

demo-add.component.html:

照片:

在组件里写入事件处理及定义变量:

demo-add.component.ts:

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)); }) }); });

至此FileUpload异步上传文件,成功后显示文件功能就实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章