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 相关文章推荐
jquery 按键盘上的enter事件
May 11 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
svg动画之动态描边效果
Feb 22 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
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中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
python 将print输出的内容保存到txt文件中
2018/07/17 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
总经理司机岗位职责
2014/02/06 职场文书
小小的船教学反思
2014/02/21 职场文书
财务主管岗位职责
2014/02/28 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
学生违反校规检讨书
2014/10/28 职场文书
保护地球的宣传语
2015/07/13 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
zabbix配置nginx监控的实现
2022/05/25 Servers
Python实现双向链表基本操作
2022/05/25 Python