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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
google广告之另类js调用实现代码
Aug 22 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
菜鸟修复电子管记
2021/03/02 无线电
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP面向对象精要总结
2014/11/07 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Python模拟登陆实现代码
2017/06/14 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
PyTorch中的Variable变量详解
2020/01/07 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
Java servlet面试题
2012/03/04 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
爱牙日活动总结
2014/08/29 职场文书