Angular2

Angular2

近期在学习使用Angular2做小项目，期间用到很多primeNG的模块。

本系列将结合实战总结angular2-primeNG各个模块的使用经验。

文件上传模块FileUploadModule

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

本例中为：

admin.module.ts

import {FileUploadModule} from 'primeng/primeng';

@NgModule({

imports: [FileUploadModule]

})

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

demo-add.component.html:

照片：

name="uploadPhoto[]"

url="http://localhost:3333/api/upload"

(onUpload)="onPhotoUpload($event)" accept="image/*" maxFileSize="1000000">

name="uploadPhoto[]"

url="http://localhost:3333/api/upload"

(onUpload)="onPhotoUpload($event)" accept="image/*" maxFileSize="1000000">

{{file.name}} - {{file.size}} bytes

</li>

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

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, dahttp://ta) {

//取时间戳用来命名

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。