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


Posted in Javascript onJanuary 14, 2017

近期在学习使用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异步上传文件,成功后显示文件的功能就实现了。

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

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS支持带x身份证号码验证函数
Aug 10 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Angular2 PrimeNG分页模块学习
Jan 14 #Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 #Javascript
详解jQuery事件
Jan 13 #Javascript
js实现固定宽高滑动轮播图效果
Jan 13 #Javascript
JavaScript利用闭包实现模块化
Jan 13 #Javascript
Vue.js基础知识小结
Jan 13 #Javascript
canvas实现流星雨的背景效果
Jan 13 #Javascript
You might like
php读取纯真ip数据库使用示例
2014/01/26 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
jquery中动态效果小结
2010/12/16 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python基础教程之循环介绍
2014/08/29 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
python 实现波浪滤镜特效
2020/12/02 Python
python 数据类型强制转换的总结
2021/01/25 Python
工程业务员工作职责
2013/12/07 职场文书
国培远程培训感言
2014/03/08 职场文书
会计专业求职信范文
2014/03/16 职场文书
就业协议书怎么填
2014/09/15 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
领导欢迎词范文
2015/01/26 职场文书
个人欠条范本
2015/07/03 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
七年级话题作文之执着
2019/11/19 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL