第一步：npm install ng2-file-upload --save 安装 ng2-file-upload

第二步：在需要使用该插件的页面的对应module文件的imports中引入CommonModule  和  FileUploadModule

第三步：在对应的组件文件中引入并声明；

以下是new FileUploader()需要传入的参数列表，?号表示可选：

第四步：在组件.ts对应的html文件中添加input标签；如下：

multiple表示多选；
 
 第五步：在组件.ts文件中创建selectedFileOnChanged()方法，进行图片选择之后的操作，例如本地预览（将selectedImgUrl中的数据绑定到html）等。

 第六步：上传文件

第七步：完成图例：

后记：2017-07-21 10：44

如果出现下图的错误，肯能是因为没有导入第二步中的相关文件，也有可能是因为在第四步的input元素设置中缺少了ng2FileSelect

 

ionic2+Angular 使用ng2-file-upload 插件上传图片并实现本地预览的更多相关文章

  1. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  2. 图像本地预览插件（基于JQUERY、HTML5）

    最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...

  3. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  4. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  5. 使用jQuery在上传图片之前实现缩略图预览

    使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...

  6. IE8/9 本地预览上传图片

    本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...

  7. angularjs file upload插件使用总结

    之前由于项目需要,决定使用angularjs做前端开发,在前两个项目中都有文件上传的功能,因为是刚接触angularjs,所以对一些模块和模块间的依赖不是很了解.都是由其他大神搭好框架,我只做些简单的 ...

  8. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  9. JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。

    本例中采用的是 JQuery File Upload + ASP.NET 的方式, Google了大半天基本没有找到合理的解决方案,倒是在 NodeJS的一遍博客中找到了灵感:http://www.i ...

随机推荐

  1. python读写文件相关内容

    1.python读取文件 f = open('E:/info.txt', 'r')#用read的方式打开a = 0for line in f.readlines():读取没一行,就是读取所有文件的意思 ...

  2. sublime text 快捷收集

    1. 文件快速导航: 这是sublime上面很好用的功能之一,ctrl+p可以调出窗口,菜单上的解释是gotoanythings ,确实如其所言,调出窗口后,直接输入关键字,可以在已打开的项目文件夹中 ...

  3. (转)导出EXCEL时科学计数法问题

    //1)  文本:vnd.ms-excel.numberformat:@ //2)  日期:vnd.ms-excel.numberformat:yyyy/mm/dd //3)  数字:vnd.ms-e ...

  4. socket套接字编程

    一.概述 1.socket是一种进程间通信方式,既可以用于一台机器,也可以用于网络.常用语C/S模型. 2.可以跨越Windows和Linux操作系统,可以跨越不同语言. 3.注意网络字节序和主机字节 ...

  5. lftp的用法

    lftp是Linux下的一个ftp工具,支持ftp, ftps, http, https, hftp, fish, sftp, file, bittorrent等协议(支持https 和 ftps,必 ...

  6. python 算法 -- 冒泡排序

    python 排序算法 -- 冒泡排序 原理 从数组的底部开始, 两两比较大小, 小的在下,大的在上, 依次类推直到顶部. 当整个数组比较完毕, 则最上面的一定是最大值(此即冒泡的由来); 当第一轮比 ...

  7. Cordova各个插件使用介绍系列（五）—$cordovaGeolocation获取当前位置

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-5-cordovageolocation/ $cordov ...

  8. 解决kubuntu(KDE4.8.5桌面环境)找不到中文语言包

    原始日期:2013-12-30 23:16 接触linux的想必都知道KDE平台,kde精美的界面是其一大特色,不过美中不足的是,很多新手在安装完KDE后,界面包括菜单选项等都是英文界面,对于英语水平 ...

  9. oracle学习笔记(2)-基本术语

    oracle基本术语 先上图. 相当粗糙的一个图,可能有些地方不够精细,大致结构基本是对的. 逻辑结构上从大到小的依次为文件(file)->表空间(tablespace)->段(segme ...

  10. Jenkins构建本地项目到服务器上自动部署的方法

    博主原创,转载请注明. 最近在用Jenkins做项目的自动部署,由于项目需求,现在要在本地构建后再放到Tomcat里.以下是本地构建步骤: 名称填写好,下面的选项是可选的. 源码管理这里选择none. ...