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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
jquery中radio checked问题
2015/03/16 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
JavaScript 异步调用
2017/10/25 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python提取频域特征知识点浅析
2019/03/04 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
公司经理任命书
2014/06/05 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2015年防汛工作总结
2015/05/15 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
教育教学工作反思
2016/02/24 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Python并发编程实例教程之线程的玩法
2021/06/20 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL