全国咨询热线:18720358503

小程序开发源码_Angular2

类别:媒体报道 发布时间:2021-01-12 浏览人次:

Angular2-primeNG文件上传模块FileUpload使用详解       这篇文章主要为大家详细介绍了Angular2-primeNG文件上传模块FileUpload使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

文件上传模块FileUploadModule

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

本例中为:

admin.module.ts

import {FileUploadModule} from 'primeng/primeng';
@NgModule({
 imports: [FileUploadModule]

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

<:
 label 照片: /label 
 div 
 !--上传组件 -- 
 p-fileUpload 
 name="uploadPhoto[]" 
 url="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 

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

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

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


推荐阅读

小程序开发源码_Angular2

Angular2-primeNG文档提交控制模块FileUpload应用详细说明 本文关键为大伙儿详尽详细介绍了Angular2-primeNG文档提交控制模块FileUpload应用,具备一定的参照使用价值,很感兴趣的小伙子伴...

2021-01-12
小程序模板源码免费_JQueryEasyUI框架下的combobox的

bobox的赋值和关联的方式 bobox的赋值和关联的方式,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下。近期做的新项目涉及到到JQueryEasyUI架构的应用,EasyUI是啥?在网...

2021-01-12
广州凡科互联网科技股份有限公司招聘泰语运营

招聘人数:10职位信息岗位职责:1、负责泰国地区游戏的FB社群维护运营;2、收集当地市场信息,负责产品本地化、并对产品包装方向提供意见支撑;3、与客服对接游戏问题,并收集与...

2021-01-12
微信点单小程序_Angular.js自界说指令学习笔记实例

Angular.js自定命令学习培训手记案例 本文关键详细介绍了Angular.js自定命令的案例编码,十分非常好,具备参照效仿使用价值,必须的朋友能够参照下title AngularDirective /title script src...

2021-01-12
广州凡科互联网科技股份有限公司招聘销售专员

招聘人数:18职位信息负责开发和拓展包括银行在内的渠道客户,达成合作;负责为客户提供专业的礼品咨询及礼品解决方案;负责公司软件产品及解决方案在银行客户的销售和业务拓展...

2021-01-12
用于站中搜索优化的搜索框优化方法

检索框应置放在浏览者期待的部位:在右上方或上边。防止应用“检索”文字链做为导航栏莱单方式的检索作用,由于大多数数浏览者更喜爱以检索框的方式开展检索。你要应当防止进...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信